<template>
  <div id="app">
    <div v-if="packageAll.is_upload == 0" class="no_package">
      -----该套餐已下架-----
    </div>
    <div class="package_detail_box" id="packageBox" v-else>
      <div class="banner_img_box" @click="isShowPopup = 1">
        <!-- <img src="./assets/home/img-banner-test.png" alt="" class="banner_img"> -->
        <img :src="baseImgUrlObj.packageImgUrl + packageAll.head_img" alt="" class="banner_img" />
      </div>
      <!-- 佣金 -->
      <!-- <div class="commission_box" style="background: #ff972d" v-if="center && appUserId && operatorId == 1">
        <div class="commission_img_box">
          <img src="./assets/home/icon-yj.png" alt="" class="commission_img" />
        </div>
        <div class="commission_title_box">
          <div class="commission_title">佣金规则：{{ packageAll.yjzc }}</div>
          <div class="commission_tip">可得{{ appYj }}元佣金</div>
        </div>
      </div>

      <div class="commission_box" style="background: #fc5540" v-if="center && appUserId && operatorId == 3">
        <div class="commission_img_box">
          <img src="./assets/home/icon-yj.png" alt="" class="commission_img" />
        </div>
        <div class="commission_title_box">
          <div class="commission_title">佣金规则：{{ packageAll.yjzc }}</div>
          <div class="commission_tip">可得{{ appYj }}元佣金</div>
        </div>
      </div>

      <div class="commission_box" style="background: #81d0fe" v-if="center && appUserId && operatorId == 2">
        <div class="commission_img_box">
          <img src="./assets/home/icon-yj.png" alt="" class="commission_img" />
        </div>
        <div class="commission_title_box">
          <div class="commission_title">佣金规则：{{ packageAll.yjzc }}</div>
          <div class="commission_tip">可得{{ appYj }}元佣金</div>
        </div>
      </div>

      <div class="commission_box" style="background: #1c1206" v-if="center && appUserId && operatorId == 4">
        <div class="commission_img_box">
          <img src="./assets/home/icon-yj.png" alt="" class="commission_img" />
        </div>
        <div class="commission_title_box">
          <div class="commission_title">佣金规则：{{ packageAll.yjzc }}</div>
          <div class="commission_tip">可得{{ appYj }}元佣金</div>
        </div>
      </div>

      <div class="commission_box" style="background: #b8ceff" v-if="center && appUserId && operatorId == 5">
        <div class="commission_img_box">
          <img src="./assets/home/icon-yj.png" alt="" class="commission_img" />
        </div>
        <div class="commission_title_box">
          <div class="commission_title">佣金规则：{{ packageAll.yjzc }}</div>
          <div class="commission_tip">可得{{ appYj }}元佣金</div>
        </div>
      </div> -->

      <!-- 注意事项 -->
      <div class="attention_box" style="background: #ff972d" v-if="packageAll.attention && operatorId == 1">
        <div class="attention_all">
          <div class="attention_title" style="background: #ff972d">
            套餐说明
          </div>
          <div class="attention_con">
            {{ packageAll.attention }}
          </div>
        </div>
      </div>

      <div class="attention_box" style="background: #81d0fe" v-else-if="packageAll.attention && operatorId == 2">
        <div class="attention_all">
          <div class="attention_title" style="background: #81d0fe">
            套餐说明
          </div>
          <div class="attention_con">
            {{ packageAll.attention }}
          </div>
        </div>
      </div>

      <div class="attention_box" style="background: #fc5540" v-else-if="packageAll.attention && operatorId == 3">
        <div class="attention_all">
          <div class="attention_title" style="background: #fc5540">
            套餐说明
          </div>
          <div class="attention_con">
            {{ packageAll.attention }}
          </div>
        </div>
      </div>

      <div class="attention_box" style="background: #1c1206" v-else-if="packageAll.attention && operatorId == 4">
        <div class="attention_all">
          <div class="attention_title" style="background: #1c1206">
            套餐说明
          </div>
          <div class="attention_con">
            {{ packageAll.attention }}
          </div>
        </div>
      </div>

      <div class="attention_box" style="background: #b8ceff" v-else-if="packageAll.attention && operatorId == 5">
        <div class="attention_all">
          <div class="attention_title" style="background: #b8ceff">
            套餐说明
          </div>
          <div class="attention_con">
            {{ packageAll.attention }}
          </div>
        </div>
      </div>





      <!-- 套餐1：电信；套餐2：联通；套餐3：移动；套餐4：广电；套餐5：物联网 -->

      <!--  v-if="packageAll.select_status == 1"  || landingTemplateId == 2-->
      <!--      v-if="selectStatus == 1   || isShowChooseNumber-->
      <div v-if="selectStatus == 1">
        <!-- 套餐1 v-if="selectStatus == 1-->
        <div v-if="operatorId == 1">
          <div class="package_type_one" v-if="landingTemplateId == '' ||
      landingTemplateId == 0 ||
      landingTemplateId == 1
      ">
            <!-- 搜索、靓号类型选择 -->
            <div class="package_search_box">
              <div class="search_all">
                <div class="search_input">
                  <van-search v-model="searchValue" placeholder="请输入您喜欢的数字"
                    style="padding: 0; border-radius: 5px 0 0 5px" />
                </div>
                <div class="search_btn" @click="handlerSearch">搜索</div>
              </div>

              <!-- 靓号类型tab -->
              <div class="account_tab_all">
                <div class="account_tab" :class="[
      isActiveAcount == item.id ? 'account_tab_active' : '',
    ]" v-for="item in accountTabList" :key="item.id" @click="handlerAccountTab(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>

            <!-- 卡号列表 -->
            <div class="account_list_box" id="packageDetail">
              <div class="account_list_all" v-for="(item, index) in accountList" :key="index"
                @click="handlerAccountList(item, index)">
                <span class="" v-for="(items, indexs) in String(item.phoneNum)" :key="indexs" :class="[
      item.phoneColors[index] == '1'
        ? 'account_num_active'
        : 'account_num',
    ]" style="text-align: center; display: inline-block">
                  {{ items }}
                </span>
                <div class="account_tip_box">
                  <div class="limited_time">限时全新</div>
                  <div class="free_collection">免费领取</div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="package_page_box">
              <div>
                <van-button :hair-line="false" :disabled="isPreviousBtn" @click="handlerPrevious"
                  class="previous_page">上一页
                </van-button>
              </div>
              <div>
                <van-button :hair-line="false" :disabled="isNextBtn" @click="handlerNext" class="next_page">
                  下一页
                </van-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 套餐3 v-if="selectStatus == 3 -->
        <div v-else-if="operatorId == 2">
          <div class="package_type_three" v-if="landingTemplateId == '' ||
      landingTemplateId == 0 ||
      landingTemplateId == 1
      ">
            <!-- 搜索、靓号类型选择 -->
            <div class="package_search_box">
              <div class="search_all">
                <div class="search_input">
                  <van-search v-model="searchValue" placeholder="请输入您喜欢的数字"
                    style="padding: 0; border-radius: 5px 0 0 5px" />
                </div>
                <div class="search_btn" @click="handlerSearch">搜索</div>
              </div>

              <!-- 靓号类型tab -->
              <div class="account_tab_all">
                <div class="account_tab" :class="[
      isActiveAcount == item.id ? 'account_tab_active' : '',
    ]" v-for="item in accountTabList" :key="item.id" @click="handlerAccountTab(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>

            <!-- 卡号列表 -->
            <div class="account_list_box" id="packageDetail">
              <div class="account_list_all" v-for="(item, index) in accountList" :key="index"
                @click="handlerAccountList(item, index)">
                <span class="" v-for="(items, indexs) in String(item.phoneNum)" :key="indexs" :class="[
      item.phoneColors[index] == '1'
        ? 'account_num_active'
        : 'account_num',
    ]" style="text-align: center; display: inline-block">
                  {{ items }}
                </span>
                <div class="account_tip_box">
                  <div class="limited_time">限时全新</div>
                  <div class="free_collection">免费领取</div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="package_page_box">
              <div>
                <van-button :hair-line="false" :disabled="isPreviousBtn" @click="handlerPrevious"
                  class="previous_page">上一页
                </van-button>
              </div>
              <div>
                <van-button :hair-line="false" :disabled="isNextBtn" @click="handlerNext" class="next_page">
                  下一页
                </van-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 套餐2 v-if="selectStatus == 2 -->
        <div v-else-if="operatorId == 3">
          <div class="package_type_two" v-if="landingTemplateId == '' ||
      landingTemplateId == 0 ||
      landingTemplateId == 1
      ">
            <!-- 搜索、靓号类型选择 -->
            <div class="package_search_box">
              <div class="search_all">
                <div class="search_input">
                  <van-search v-model="searchValue" placeholder="请输入您喜欢的数字"
                    style="padding: 0; border-radius: 5px 0 0 5px" />
                </div>
                <div class="search_btn" @click="handlerSearch">搜索</div>
              </div>

              <!-- 靓号类型tab -->
              <div class="account_tab_all">
                <div class="account_tab" :class="[
      isActiveAcount == item.id ? 'account_tab_active' : '',
    ]" v-for="item in accountTabList" :key="item.id" @click="handlerAccountTab(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>

            <!-- 卡号列表 -->
            <div class="account_list_box" id="packageDetail">
              <div class="account_list_all" v-for="(item, index) in accountList" :key="index"
                @click="handlerAccountList(item, index)">
                <span class="" v-for="(items, indexs) in String(item.phoneNum)" :key="indexs" :class="[
      item.phoneColors[index] == '1'
        ? 'account_num_active'
        : 'account_num',
    ]" style="text-align: center; display: inline-block">
                  {{ items }}
                </span>
                <div class="account_tip_box">
                  <div class="limited_time">限时全新</div>
                  <div class="free_collection">免费领取</div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="package_page_box">
              <div>
                <van-button :hair-line="false" :disabled="isPreviousBtn" @click="handlerPrevious"
                  class="previous_page">上一页
                </van-button>
              </div>
              <div>
                <van-button :hair-line="false" :disabled="isNextBtn" @click="handlerNext" class="next_page">
                  下一页
                </van-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 套餐4 v-if="selectStatus == 4 -->
        <div v-else-if="operatorId == 4">
          <div class="package_type_four" v-if="landingTemplateId == '' ||
      landingTemplateId == 0 ||
      landingTemplateId == 1
      ">
            <!-- 搜索、靓号类型选择 -->
            <div class="package_search_box">
              <div class="search_all">
                <div class="search_input">
                  <van-search v-model="searchValue" placeholder="请输入您喜欢的数字"
                    style="padding: 0; border-radius: 5px 0 0 5px" />
                </div>
                <div class="search_btn" @click="handlerSearch">搜索</div>
              </div>

              <!-- 靓号类型tab -->
              <div class="account_tab_all">
                <div class="account_tab" :class="[
      isActiveAcount == item.id ? 'account_tab_active' : '',
    ]" v-for="item in accountTabList" :key="item.id" @click="handlerAccountTab(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>

            <!-- 卡号列表 -->
            <div class="account_list_box" id="packageDetail">
              <div class="account_list_all" v-for="(item, index) in accountList" :key="index"
                @click="handlerAccountList(item, index)">
                <span class="" v-for="(items, indexs) in String(item.phoneNum)" :key="indexs" :class="[
      item.phoneColors[index] == '1'
        ? 'account_num_active'
        : 'account_num',
    ]" style="text-align: center; display: inline-block">
                  {{ items }}
                </span>
                <div class="account_tip_box">
                  <div class="limited_time">限时全新</div>
                  <div class="free_collection">免费领取</div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="package_page_box">
              <div>
                <van-button :hair-line="false" :disabled="isPreviousBtn" @click="handlerPrevious"
                  class="previous_page">上一页
                </van-button>
              </div>
              <div>
                <van-button :hair-line="false" :disabled="isNextBtn" @click="handlerNext" class="next_page">
                  下一页
                </van-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 套餐5 v-if="selectStatus == 5 -->
        <div v-else-if="operatorId == 5">
          <div class="package_type_five" v-if="landingTemplateId == '' ||
      landingTemplateId == 0 ||
      landingTemplateId == 1
      ">
            <!-- 搜索、靓号类型选择 -->
            <div class="package_search_box">
              <div class="search_all">
                <div class="search_input">
                  <van-search v-model="searchValue" placeholder="请输入您喜欢的数字"
                    style="padding: 0; border-radius: 5px 0 0 5px" />
                </div>
                <div class="search_btn" @click="handlerSearch">搜索</div>
              </div>

              <!-- 靓号类型tab -->
              <div class="account_tab_all">
                <div class="account_tab" :class="[
      isActiveAcount == item.id ? 'account_tab_active' : '',
    ]" v-for="item in accountTabList" :key="item.id" @click="handlerAccountTab(item)">
                  {{ item.name }}
                </div>
              </div>
            </div>

            <!-- 卡号列表 -->
            <div class="account_list_box" id="packageDetail">
              <div class="account_list_all" v-for="(item, index) in accountList" :key="index"
                @click="handlerAccountList(item, index)">
                <span class="" v-for="(items, indexs) in String(item.phoneNum)" :key="indexs" :class="[
      item.phoneColors[index] == '1'
        ? 'account_num_active'
        : 'account_num',
    ]" style="text-align: center; display: inline-block">
                  {{ items }}
                </span>
                <div class="account_tip_box">
                  <div class="limited_time">限时全新</div>
                  <div class="free_collection">免费领取</div>
                </div>
              </div>
            </div>

            <!-- 分页 -->
            <div class="package_page_box">
              <div>
                <van-button :hair-line="false" :disabled="isPreviousBtn" @click="handlerPrevious"
                  class="previous_page">上一页
                </van-button>
              </div>
              <div>
                <van-button :hair-line="false" :disabled="isNextBtn" @click="handlerNext" class="next_page">
                  下一页
                </van-button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 不选号状态的表单 -->
      <div v-else-if="selectStatus == 0">
        <!-- 不选号，之前显示表单 v-else-->
        <!-- 不选号模板1  -->
        <div class="account_box" id="packageDetailNoChoose" v-if="operatorId == 1">
          <!-- 图片 -->
          <div class="account_tip_img_box">
            <img src="./assets/home/img-tip.png" alt="" class="account_tip_img" />
          </div>

          <div class="popup_account_all">
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">姓名</div>
              <input placeholder="请填写收件人姓名(已加密)" placeholder-style="font-size: 13px;" :border="false"
                v-model="applicantModel.userInfo.recipientsName" @input="blurName" class="input_size" />
            </div>
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">收件电话</div>
              <input placeholder="请填写收件电话(已加密)" placeholder-style="font-size: 13px;" :border="false" maxlength="11"
                v-model="applicantModel.userInfo.recipientsPhone" @input="blurPhone" class="input_size" />
            </div>
            <!-- v-if="isShowPersonMsg" -->
            <div class="" v-if="isShowPersonMsg">
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证姓名</div>
                <input v-model="applicantModel.userInfo.name" :border="false" placeholder="请输入身份证姓名(已加密)"
                  placeholder-style="font-size: 13px;" class="input_size" style="width: 150px" />
              </div>
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证号码</div>
                <input placeholder="请输入身份证号码(已加密)" placeholder-style="font-size: 13px;" maxlength="18" :border="false"
                  v-model="applicantModel.userInfo.number" class="input_size" style="width: 150px" />
              </div>
              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">收件地址</div>
                <input v-model="city" placeholder="请选择省市区(已加密)" placeholder-style="font-size: 13px;" type="select"
                  readonly @click="handlerPicker" class="input_size" />
                <!-- @click="isShowCity = true" /> -->
                <div class="city_picker_box" style="display: none">
                  <van-picker title="" show-toolbar :columns="cityList" @confirm="confirmPicker"
                    @cancel="cancelPicker" />
                </div>
              </div>

              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">详细地址</div>
                <input placeholder="请填写详细地址(已加密)" placeholder-style="font-size: 13px;" :border="false"
                  v-model="applicantModel.userInfo.recipientsAddress" class="input_size" />
              </div>
            </div>

            <div class="read_box">
              <div class="read_check">
                <van-radio-group v-model="checkMsg" direction="horizontal">
                  <van-radio name="1">
                    <span>我已阅读并同意</span>
                  </van-radio>
                  <span @click="handlerAgreement" class="read_msg">《入网协议》</span>
                  <span @click="handlerCollect" class="read_msg">《信息收集公告》</span>
                </van-radio-group>
              </div>
              <div class="submit_box" @click="submit">
                <img src="./assets/home/img-submit.png" alt="" class="submit_img" />
              </div>
            </div>
          </div>
        </div>

        <!-- 不选号模板3  v-if="selectStatus == 3-->
        <div class="account_three_box" id="packageDetailNoChoose" v-else-if="operatorId == 2">
          <!-- 图片 -->
          <div class="account_tip_img_box">
            <img src="./assets/home/img-tip.png" alt="" class="account_tip_img" />
          </div>

          <div class="popup_account_all">
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">姓名</div>
              <input placeholder="请填写收件人姓名(已加密)" placeholder-style="font-size: 13px;" :border="false"
                v-model="applicantModel.userInfo.recipientsName" @input="blurName" class="input_size" />
            </div>
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">收件电话</div>
              <input placeholder="请填写收件电话(已加密)" placeholder-style="font-size: 13px;" :border="false" maxlength="11"
                v-model="applicantModel.userInfo.recipientsPhone" @input="blurPhone" class="input_size" />
            </div>
            <!-- v-if="isShowPersonMsg" -->
            <div class="" v-if="isShowPersonMsg">
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证姓名</div>
                <input v-model="applicantModel.userInfo.name" :border="false" placeholder="请输入身份证姓名(已加密)"
                  placeholder-style="font-size: 13px;" class="input_size" />
              </div>
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证号码</div>
                <input placeholder="请输入身份证号码(已加密)" placeholder-style="font-size: 13px;" maxlength="18" :border="false"
                  v-model="applicantModel.userInfo.number" class="input_size" />
              </div>
              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">收件地址</div>
                <input v-model="city" placeholder="请选择省市区(已加密)" placeholder-style="font-size: 13px;" type="select"
                  @click="handlerPicker" class="input_size" />
                <!-- @click="isShowCity = true" /> -->
                <div class="city_picker_box" style="display: none">
                  <van-picker title="" show-toolbar :columns="cityList" @confirm="confirmPicker"
                    @cancel="cancelPicker" />
                </div>
              </div>

              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">详细地址</div>
                <input placeholder="请填写详细地址(已加密)" placeholder-style="font-size: 13px;" :border="false"
                  v-model="applicantModel.userInfo.recipientsAddress" class="input_size" />
              </div>
            </div>

            <div class="read_box">
              <div class="read_check">
                <van-radio-group v-model="checkMsg" direction="horizontal">
                  <van-radio name="1">
                    <span>我已阅读并同意</span>
                  </van-radio>
                  <span @click="handlerAgreement" class="read_msg">《入网协议》</span>
                  <span @click="handlerCollect" class="read_msg">《信息收集公告》</span>
                </van-radio-group>
              </div>
              <div class="submit_box" @click="submit">
                <img src="./assets/home/img-submit.png" alt="" class="submit_img" />
              </div>
            </div>
          </div>
        </div>

        <!-- 不选号模板2  v-if="selectStatus == 2"-->
        <div class="account_two_box" id="packageDetailNoChoose" v-else-if="operatorId == 3">
          <!-- 图片 -->
          <div class="account_tip_img_box">
            <img src="./assets/home/img-tip.png" alt="" class="account_tip_img" />
          </div>

          <div class="popup_account_all">
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">姓名</div>
              <input placeholder="请填写收件人姓名(已加密)" placeholder-style="font-size: 13px;" :border="false"
                v-model="applicantModel.userInfo.recipientsName" @input="blurName" class="input_size" />
            </div>
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">收件电话</div>
              <input placeholder="请填写收件电话(已加密)" placeholder-style="font-size: 13px;" :border="false" maxlength="11"
                v-model="applicantModel.userInfo.recipientsPhone" @input="blurPhone" class="input_size" />
            </div>
            <!-- v-if="isShowPersonMsg" -->
            <div class="" v-if="isShowPersonMsg">
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证姓名</div>
                <input v-model="applicantModel.userInfo.name" :border="false" placeholder="请输入身份证姓名(已加密)"
                  placeholder-style="font-size: 13px;" class="input_size" />
              </div>
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证号码</div>
                <input placeholder="请输入身份证号码(已加密)" placeholder-style="font-size: 13px;" maxlength="18" :border="false"
                  v-model="applicantModel.userInfo.number" class="input_size" />
              </div>
              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">收件地址</div>
                <input v-model="city" placeholder="请选择省市区(已加密)" placeholder-style="font-size: 13px;" type="select"
                  @click="handlerPicker" class="input_size" />
                <!-- @click="isShowCity = true" /> -->
                <div class="city_picker_box" style="display: none">
                  <van-picker title="" show-toolbar :columns="cityList" @confirm="confirmPicker"
                    @cancel="cancelPicker" />
                </div>
              </div>

              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">详细地址</div>
                <input placeholder="请填写详细地址(已加密)" placeholder-style="font-size: 26rpx;" :border="false"
                  v-model="applicantModel.userInfo.recipientsAddress" class="input_size" />
              </div>
            </div>

            <div class="read_box">
              <div class="read_check">
                <van-radio-group v-model="checkMsg" direction="horizontal">
                  <van-radio name="1">
                    <span>我已阅读并同意</span>
                  </van-radio>
                  <span @click="handlerAgreement" class="read_msg">《入网协议》</span>
                  <span @click="handlerCollect" class="read_msg">《信息收集公告》</span>
                </van-radio-group>
              </div>
              <div class="submit_box" @click="submit">
                <img src="./assets/home/img-submit.png" alt="" class="submit_img" />
              </div>
            </div>
          </div>
        </div>

        <!-- 不选号模板4  v-if="selectStatus == 4"-->
        <div class="account_four_box" id="packageDetailNoChoose" v-else-if="operatorId == 4">
          <!-- 图片 -->
          <div class="account_tip_img_box">
            <img src="./assets/home/img-tip.png" alt="" class="account_tip_img" />
          </div>

          <div class="popup_account_all">
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">姓名</div>
              <input placeholder="请填写收件人姓名(已加密)" placeholder-style="font-size: 13px;" :border="false"
                v-model="applicantModel.userInfo.recipientsName" @input="blurName" class="input_size" />
            </div>
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">收件电话</div>
              <input placeholder="请填写收件电话(已加密)" placeholder-style="font-size: 13px;" :border="false" maxlength="11"
                v-model="applicantModel.userInfo.recipientsPhone" @input="blurPhone" class="input_size" />
            </div>
            <!-- v-if="isShowPersonMsg" -->
            <div class="" v-if="isShowPersonMsg">
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证姓名</div>
                <input v-model="applicantModel.userInfo.name" :border="false" placeholder="请输入身份证姓名(已加密)"
                  placeholder-style="font-size: 13px;" class="input_size" />
              </div>
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证号码</div>
                <input placeholder="请输入身份证号码(已加密)" placeholder-style="font-size: 13px;" maxlength="18" :border="false"
                  v-model="applicantModel.userInfo.number" class="input_size" />
              </div>
              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">收件地址</div>
                <input v-model="city" placeholder="请选择省市区(已加密)" placeholder-style="font-size: 13px;" type="select"
                  @click="handlerPicker" class="input_size" />
                <!-- @click="isShowCity = true" /> -->
                <div class="city_picker_box" style="display: none">
                  <van-picker title="" show-toolbar :columns="cityList" @confirm="confirmPicker"
                    @cancel="cancelPicker" />
                </div>
              </div>

              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">详细地址</div>
                <input placeholder="请填写详细地址(已加密)" placeholder-style="font-size: 26rpx;" :border="false"
                  v-model="applicantModel.userInfo.recipientsAddress" class="input_size" />
              </div>
            </div>

            <div class="read_box">
              <div class="read_check">
                <van-radio-group v-model="checkMsg" direction="horizontal">
                  <van-radio name="1">
                    <span>我已阅读并同意</span>
                  </van-radio>
                  <span @click="handlerAgreement" class="read_msg">《入网协议》</span>
                  <span @click="handlerCollect" class="read_msg">《信息收集公告》</span>
                </van-radio-group>
              </div>
              <div class="submit_box" @click="submit">
                <img src="./assets/home/img-submit.png" alt="" class="submit_img" />
              </div>
            </div>
          </div>
        </div>

        <!-- 不选号模板5 selectStatus == 5-->
        <div class="account_five_box" id="packageDetailNoChoose" v-else-if="operatorId == 5">
          <!-- 图片 -->
          <div class="account_tip_img_box">
            <img src="./assets/home/img-tip.png" alt="" class="account_tip_img" />
          </div>

          <div class="popup_account_all">
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">姓名</div>
              <input placeholder="请填写收件人姓名(已加密)" placeholder-style="font-size: 13px;" :border="false"
                v-model="applicantModel.userInfo.recipientsName" @input="blurName" class="input_size" />
            </div>
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">收件电话</div>
              <input placeholder="请填写收件电话(已加密)" placeholder-style="font-size: 13px;" :border="false" maxlength="11"
                v-model="applicantModel.userInfo.recipientsPhone" @input="blurPhone" class="input_size" />
            </div>
            <!-- v-if="isShowPersonMsg" -->
            <div class="" v-if="isShowPersonMsg">
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证姓名</div>
                <input v-model="applicantModel.userInfo.name" :border="false" placeholder="请输入身份证姓名(已加密)"
                  placeholder-style="font-size: 13px;" class="input_size" />
              </div>
              <div class="buy-applicant-input-box">
                <div class="buy-applicant-input-title">身份证号码</div>
                <input placeholder="请输入身份证号码(已加密)" placeholder-style="font-size: 13px;" maxlength="18" :border="false"
                  v-model="applicantModel.userInfo.number" class="input_size" />
              </div>
              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">收件地址</div>
                <input v-model="city" placeholder="请选择省市区(已加密)" placeholder-style="font-size: 13px;" type="select"
                  @click="handlerPicker" class="input_size" />
                <!-- @click="isShowCity = true" /> -->
                <div class="city_picker_box" style="display: none">
                  <van-picker title="" show-toolbar :columns="cityList" @confirm="confirmPicker"
                    @cancel="cancelPicker" />
                </div>
              </div>

              <div class="buy-recipients-all">
                <div class="buy-recipients-input-title">详细地址</div>
                <input placeholder="请填写详细地址(已加密)" placeholder-style="font-size: 26rpx;" :border="false"
                  v-model="applicantModel.userInfo.recipientsAddress" class="input_size" />
              </div>
            </div>

            <div class="read_box">
              <div class="read_check">
                <van-radio-group v-model="checkMsg" direction="horizontal">
                  <van-radio name="1">
                    <span>我已阅读并同意</span>
                  </van-radio>
                  <span @click="handlerAgreement" class="read_msg">《入网协议》</span>
                  <span @click="handlerCollect" class="read_msg">《信息收集公告》</span>
                </van-radio-group>
              </div>
              <div class="submit_box" @click="submit">
                <img src="./assets/home/img-submit.png" alt="" class="submit_img" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 模板1-领取流程 -->
      <!-- 电信 -->
      <div class="flow_path_box" v-if="operatorId == 1">
        <div class="flow_path_img_box">
          <img src="./assets/home/icon-flow-path.png" alt="" class="flow_path_img" />
        </div>
      </div>
      <!-- 移动 -->
      <div class="flow_path_box" v-else-if="operatorId == 2">
        <div class="flow_path_img_box">
          <img src="./assets/home/icon-flow-path-five.png" alt="" class="flow_path_img" />
        </div>
      </div>
      <!-- 联通 -->
      <div class="flow_path_box" v-else-if="operatorId == 3">
        <div class="flow_path_img_box">
          <img src="./assets/home/icon-flow-path-two.png" alt="" class="flow_path_img" />
        </div>
      </div>

      <!-- 广电 -->
      <div class="flow_path_box" v-else-if="operatorId == 4" style="background: #000">
        <div class="flow_path_img_box">
          <img src="./assets/home/icon-flow-path-four.png" alt="" class="flow_path_img" />
        </div>
      </div>

      <!-- 物联网 -->
      <div class="flow_path_box" v-else-if="operatorId == 5">
        <div class="flow_path_img_box">
          <img src="./assets/home/icon-flow-path-three.png" alt="" class="flow_path_img" />
        </div>
      </div>

      <!-- detail -->
      <div class="detail_img_box" id="detail_img_box">
        <div v-html="packageAll.details"></div>
      </div>

      <!-- 领取按钮  v-if="packageAll.select_status == 1"-->
      <div class="receive_btn_box" v-if="operatorId == 1" @click="handlerReceive">
        立即领取 包邮到家
      </div>

      <div class="receive_btn_two_box" v-else-if="operatorId == 3" @click="handlerReceive">
        立即领取 包邮到家
      </div>

      <div class="receive_btn_three_box" v-else-if="operatorId == 2" @click="handlerReceive">
        立即领取 包邮到家
      </div>

      <div class="receive_btn_four_box" v-else-if="operatorId == 4" @click="handlerReceive">
        立即领取 包邮到家
      </div>

      <div class="receive_btn_five_box" v-else-if="operatorId == 5" @click="handlerReceive">
        立即领取 包邮到家
      </div>

      <!-- 分享浮动按钮 v-if="appUserId"-->
      <div class="share_box" v-if="appUserId && userLevel !== 0">
        <div class="share_img_box" @click="handlerShare">
          <img src="@/assets/home/icon-share.png" alt="" class="share_img" />
        </div>
      </div>

      <!-- 客服按钮 -->
      <div class="custom_box" v-if="true">
        <div class="custom_img_box" @click="handleCustom">
          <img src="@/assets/home/icon-custom-float.png" alt="" class="custom_img">
        </div>
      </div>

      <!-- 协议弹出层 -->
      <div class="popup_agreement_box" v-if="showAgreement">
        <div class="agreement_box">
          <div v-html="agreementMsg"></div>
        </div>
        <!-- 关闭按钮 -->
        <div class="close_btn_box" @click="handlerCloseAgreement">
          <img src="./assets/home/icon-popup-close.png" alt="" class="close_btn" />
        </div>
      </div>
      <!-- <van-popup v-model="showAgreement" position="bottom" :round="true" closeable>
        <div class="agreement_box" style="padding: 30px 20px;">
          <div v-html="agreementMsg"></div>
        </div>
      </van-popup> -->

      <!-- 选号弹窗 -->
      <div class="popup_choose_box" v-if="showAccount">
        <div class="popup_choose_all">
          <div class="top_box">
            <div class="boutique_title">已选择精品号码</div>
          </div>
          <div class="boutique_phone">
            {{ applicantModel.userInfo.chooseNum }}
          </div>
          <div class="acount_con">
            根据国家手机号卡实名制规定，请如实填写信息
            <span style="color: #dd5e7c">15天内</span>
            已在线领卡请换其他证件下单，以便及时为您送达
          </div>
          <div class="buy-recipients-all">
            <div class="buy-recipients-input-title">姓名</div>
            <input placeholder="请填写收件人姓名(已加密)" placeholder-style="font-size: 26rpx;" :border="false"
              v-model="applicantModel.userInfo.recipientsName" @input="blurName" @blur="handlerBlurName"
              class="input_size" />
          </div>
          <div class="buy-recipients-all">
            <div class="buy-recipients-input-title">收件电话</div>
            <input placeholder="请填写收件电话(已加密)" placeholder-style="font-size: 26rpx;" :border="false" maxlength="11"
              v-model="applicantModel.userInfo.recipientsPhone" @input="blurPhone" class="input_size" />
          </div>
          <div class="" v-if="isShowPersonMsg">
            <div class="buy-applicant-input-box" style="padding: 10px 0">
              <div class="buy-applicant-input-title">身份证姓名</div>
              <input v-model="applicantModel.userInfo.name" :border="false" placeholder="请输入身份证姓名(已加密)"
                placeholder-style="font-size: 26rpx;" class="input_size" />
            </div>
            <div class="buy-applicant-input-box">
              <div class="buy-applicant-input-title">身份证号码</div>
              <input placeholder="请输入身份证号码(已加密)" placeholder-style="font-size: 26rpx;" maxlength="18" :border="false"
                v-model="applicantModel.userInfo.number" class="input_size" />
            </div>
            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">收件地址</div>
              <input v-model="city" placeholder="请选择省市区(已加密)" placeholder-style="font-size: 26rpx;" type="select"
                @click="handlerPicker" class="input_size" />

              <div class="city_picker_box" style="display: none">
                <van-picker title="" show-toolbar :columns="cityList" @confirm="confirmPicker" @cancel="cancelPicker" />
              </div>
            </div>

            <div class="buy-recipients-all">
              <div class="buy-recipients-input-title">详细地址</div>
              <input placeholder="请填写详细地址(已加密)" placeholder-style="font-size: 26rpx;" :border="false"
                v-model="applicantModel.userInfo.recipientsAddress" class="input_size" />
            </div>
          </div>

          <div class="read_box">
            <div class="read_check">
              <van-radio-group v-model="checkMsg" direction="horizontal">
                <van-radio name="1">
                  <span>我已阅读并同意</span>
                </van-radio>
                <span @click="handlerAgreement" class="read_msg">《入网协议》</span>
                <span @click="handlerCollect" class="read_msg">《信息收集公告》</span>
              </van-radio-group>
            </div>
            <div class="submit_box" @click="submit">
              <img src="./assets/home/img-submit.png" alt="" class="submit_img" />
            </div>
          </div>
        </div>

        <!-- 关闭按钮 -->
        <div class="close_btn_box" @click="handlerCloseChoose">
          <img src="./assets/home/icon-popup-close.png" alt="" class="close_btn" />
        </div>
      </div>

      <!-- 申请是否成功弹窗 -->
      <div class="popup_submit_box" v-if="isShowSubmitState">
        <div class="popup_close_box" @click="handlerClosePopup">
          <img src="./assets/home/icon-popup-close.png" alt="" class="popup_close" />
        </div>
        <div class="popup_submit_all">
          <div class="submit_title_box">
            <div class="left_box">
              <img src="./assets/home/img-submit-popup.png" alt="" class="left_img" />
            </div>
            <div class="right_box">
              <div class="right_title">申请失败</div>
              <div class="right_tip">
                {{ failTitle }}
              </div>
            </div>
          </div>
          <!-- 智能推荐 -->
          <div class="popup_recommend_box">
            <div class="recommend_title_box">
              <div class="recommend_left_title">智能推荐</div>
              <div class="recommend_right_title">为您推荐更合适的套餐</div>
            </div>

            <!-- 推荐套餐详情-模板1 -->
            <div class="popup_package_one_box" v-if="isShowPopup == 1">
              <div class="popup_package_all" v-for="(item, index) in popupPackageList" :key="index"
                @click="handlerChoosePackage(item, index)">
                <div class="package_img_box">
                  <img :src="baseImgUrlObj.intelligencePackageImg + item.head_img" alt="" class="package_img" />
                </div>
                <div class="package_title">
                  {{ item.name }}
                </div>
                <div class="package_tip_box">
                  <!-- <div class="package_tip" v-for="(items, indexs) in item.tip" :key="indexs">{{ items }}</div> -->
                </div>
                <div class="package_introduce">
                  {{ item.mini_text }}
                </div>
                <div class="package_price_box">
                  <div class="package_price">
                    ￥<span style="font-size: 16px">{{ item.price }}</span>
                  </div>
                  <div class="package_count">已售 {{ item.sales_volume }}</div>
                </div>
              </div>
            </div>

            <!-- 推荐套餐详情-模板2 -->
            <div class="popup_package_two_box" v-else-if="isShowPopup == 2">
              <div class="popup_package_all" v-for="(item, index) in popupPackageList" :key="index">
                <div class="package_img_box">
                  <img :src="baseImgUrlObj.intelligencePackageImg + item.head_img" alt="" class="package_img" />
                </div>
                <div class="package_title">
                  {{ item.name }}
                </div>
                <div class="package_tip_box">
                  <!-- <div class="package_tip" v-for="(items, indexs) in item.tip" :key="indexs">{{ items }}</div> -->
                </div>
                <div class="package_introduce">
                  {{ item.mini_text }}
                </div>
                <div class="package_price_box">
                  <div class="package_price">
                    ￥<span style="font-size: 16px">{{ item.price }}</span>
                  </div>
                  <div class="package_count">已售 {{ item.sales_volume }}</div>
                </div>
              </div>
            </div>

            <!-- 推荐套餐详情-模板3 -->
            <div class="popup_package_three_box" v-if="isShowPopup == 3">
              <div class="popup_package_three_all" v-for="(item, index) in popupPackageList" :key="index">
                <div class="left_box">
                  <img :src="baseImgUrlObj.intelligencePackageImg + item.head_img" alt="" class="left_img" />
                </div>
                <div class="right_box">
                  <div class="package_title">
                    {{ item.name }}
                  </div>
                  <div class="package_tip_box">
                    <!-- <div class="package_tip" v-for="(items, indexs) in item.tip" :key="indexs">{{ items }}</div> -->
                  </div>
                  <div class="package_introduce">
                    {{ item.mini_text }}
                  </div>
                  <div class="package_price_box">
                    <div class="price_box">
                      <div class="package_price">
                        ￥<span style="font-size: 16px">{{ item.price }}</span>
                      </div>
                      <div class="package_count">
                        已售 {{ item.sales_volume }}
                      </div>
                    </div>
                    <div class="price_buy_btn" @click="handleBuy(item)">立即购买</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 刷新按钮 -->
            <div class="popup_refresh_box" @click="handlerRefresh" v-if="false">
              <div class="refresh_icon_box">
                <img src="./assets/home/icon-refresh.png" alt="" class="refresh_icon" />
              </div>
              <div class="refresh_title">刷新查看更多推荐套餐</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分享海报弹窗 -->
      <div class="popup_share_box" v-if="isShowShareImg" @touchmove.prevent>
        <div class="share_img_box">
          <img :src="shareImg" alt="" class="share_img" />
        </div>

        <div class="share_close_btn_box" @click="handlerCloseShare" @touchstart="touchStart()" @touchend="touchEnd()">
          <img src="@/assets/home/icon-popup-close.png" alt="" class="share_close_btn" />
        </div>

        <!-- 最新 -->
        <!-- <div class="popup_bottom_box">
          <div class="copywriting_box">
            <div class="copywriting_icon_box">
              <img src="@/assets/home/Copywritingicon-.png" alt="" class="copywriting_icon">
            </div>
            <div class="copywriting_title">更换文案</div>
          </div>

          <div class="copywriting_input_box">
            <div class="copywriting_input">
              价格优惠
            </div>
            <div class="refresh_icon_box">
              <img src="@/assets/home/icon-refresh-shop.png" alt="" class="refresh_icon">
            </div>
          </div>

          <div class="components_box">
            <div class="components_icon_box">
              <img src="@/assets/home/icon-components.png" alt="" class="components_icon">
            </div>
            <div class="components_title">选择模板</div>
          </div>

          <div class="components_img_box">
            <div class="components_img_all" v-for="item in shopImgList" :key="item.id" @click="handleComponents(item)">
              <img :src="item.preview_img" alt="" class="components_img">

              <div class="mask" v-if="isActive == item.id"></div>
              <div class="right_icon_box" v-if="isActive == item.id">
                <img src="./assets/home/icon-right.png" mode="" class="right_icon" />
              </div>
            </div>
          </div>

          <div class="bottom_share_box">
            <div class="share_img_box">
              <img src="@/assets/home/icon-save.png" alt="" class="share_img">
            </div>
            <div class="share_title">
              <a :href="chooseShopImg"  download="download.png">保存本地</a>
            </div>
          </div>
        </div> -->

        <!-- <div class="popup_top_box">
          <div class="top_img_box">
            <img :src="chooseShopImg" alt="" class="top_img">
          </div>
          <div class="popup_close_img" @click="handleCloseShop">
            <img src="./assets/home/icon-popup-close.png" alt="" class="close_img">
          </div>
        </div>  -->

      </div>

      <!-- 注意事项弹窗   v-if="packageAll.min_age || notShipAddressList.length !== 0"-->
      <!-- <div class="popup_attention_box" v-if="isShowAttention">
        <div class="popup_attention_all">
          <div class="matter_title">注意事项</div>
          <div class="attention_con_box">
            <div v-if="packageAll.min_age">
              <div class="matter_con_title">年龄限制：</div>
              <div class="matter_con_detail">{{ packageAll.min_age }}-{{ packageAll.max_age }}可用</div>
            </div>
            <div v-if="notShipAddressList.length !== 0">
              <div class="matter_con_title">不发货地区：</div>
              <div class="matter_con_detail" v-for="(item, index) in notShipAddressList" :key="index">
                {{ item }}
              </div>
            </div>
          </div>
        </div>

        <div class="attention_close_box" @click="handleCloseAttention">
          <img src="@/assets/home/icon-popup-close.png" alt="" class="attention_close" />
        </div>
      </div> -->

      <!-- 遮罩层 -->
      <div class="mask" v-if="showMask" @click="handlerClosePopup"></div>

      <!-- 遮罩层2 -->
      <div class="mask_agreement" v-if="showMaskAgreement" @click="handlerCloseAgreement"></div>

      <!-- 遮罩层3  v-if="isShowAttention"-->
      <!-- <div class="mask_agreement" v-if="isShowAttention"></div> -->
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Dialog } from "vant";
import initCityPicker from "./utils/data.city";
import AMap from "AMap";
// import VConsole from 'vconsole';
import imageUrl from "./utils/imageUrl";
import baseUrl from "./utils/requestUrl";
export default {
  name: "App",
  data() {
    return {
      key: "OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77",
      qq: null,
      address: null,
      src: "",
      isShowCity: false,
      cityList: [],
      channesImgUrl: "https://information.flow.haokazhijia.net/channes/",
      packagesImgUrl: "https://information.flow.haokazhijia.net/packages/",
      packageChooseList: [],
      isActiveIcon: 0,
      searchValue: "", // 搜索
      accountTabList: [
        {
          id: 0,
          name: "全部",
          type: "all",
        },
        {
          id: 1,
          name: "ABC+",
          type: "ABC+",
        },
        {
          id: 2,
          name: "尾号8",
          type: "eight",
        },
        {
          id: 3,
          name: "爱情号",
          type: "love",
        },
        {
          id: 4,
          name: "AAA+",
          type: "AAA+",
        },
        {
          id: 5,
          name: "AA",
          type: "AA",
        },
        {
          id: 6,
          name: "ABAB",
          type: "ABAB",
        },
        {
          id: 7,
          name: "ABBA",
          type: "ABBA",
        },
      ],
      isActiveAcount: 0,
      accountList: [],
      isAccountList: 0,
      isPreviousBtn: true,
      isNextBtn: false,
      clientHeight: "",
      isShowBtn: false,
      showAccount: false,
      applicantModel: {
        userInfo: {
          chooseNum: "",
          name: "",
          number: "",
          recipientsName: "",
          recipientsPhone: "",
          recipientsAddress: "",
          code: "",
        },
      },
      city: "", // 省市区
      isShowPicker: false,
      readList: [
        {
          name: "我已阅读并同意",
        },
      ],
      checkMsg: "1",
      vcodeBtnName: "验证码",
      countNum: 120,
      showAgreement: false,
      agreementCon: "",
      agreementMsg: "",
      appId: "tt4b0c3db1d430dd2e01",
      secret: "808cbc0f156b08a84e4b12724a22ef4830f5fa38",
      userCode: "",
      openId: "",
      showLogin: false,
      channeId: "",
      packageObj: {},
      packageAll: {},
      imageUrl: "",
      accountType: "all",
      isShowChoose: false, // 是否选号
      nextIndex: 0,
      showSuccess: false,
      successCon: "恭喜活动参加成功！我们会快马加鞭为您送达！",
      agreementObj: {},
      agreementMsg: "",
      packageSecond: {},
      pageTitle: "",
      isShowPersonMsg: false,
      blurNameMsg: "",
      blurPhoneMsg: "",
      // 通过该字段判断显示套餐1/2/3
      landingTemplateId: "",
      accountCode: "",
      vicePackageId: "",
      logsObj: {},
      packageDetails: "",
      scrollPosition: 0,
      method1_id: "",
      method1_name: "",
      method1_name2: "",
      preemptionType: "",
      longitude: 0, //经度
      latitude: 0, //维度
      buttonId: "",
      fixedButton: "",
      // 显示第几个套餐
      selectStatus: "",
      // 显示提交是否成功的弹窗
      isShowSubmitState: false,
      // 弹窗套餐
      popupPackageList: [],
      // 套餐模板显示
      isShowPopup: null,
      showMask: false,
      showMaskAgreement: false,

      appUserId: "",
      nickName: '',
      headImageUrl: '',
      agentId: "",
      areasName: "", // 接收app传过来的省市名字
      packagePrice: "", // 接收app传过来的价格
      operatorId: "", // 运营商id
      baseImgUrlObj: {},
      failTitle: "", // 失败原因
      simplifyCity: "",
      requestBaseUrl: "",
      isClick: true,
      fxuserId: "",
      shareImg: "",
      isShowShareImg: false,
      validName: "",
      chooseNumAddress: "",
      hahaCode: "",
      qrcodeUrl64: "",
      timer: "",
      userLevel: "",
      appYj: '',
      phoneNum: '',
      timestamp: Date.now(),
      // 不发货地址弹窗
      notShipAddressList: [],
      // 显示不发货地址
      isShowAttention: false,
      locationUrl: '',

      componentsList: [{
        id: '0',
        img: require('./assets/home/img-two.png')
      },
      {
        id: '1',
        img: require('./assets/home/img-two.png')
      },
      {
        id: '2',
        img: require('./assets/home/img-two.png')
      },
      {
        id: '3',
        img: require('./assets/home/img-two.png')
      },
      {
        id: '4',
        img: require('./assets/home/img-two.png')
      },
      {
        id: '5',
        img: require('./assets/home/img-two.png')
      },
      {
        id: '6',
        img: require('./assets/home/img-two.png')
      },
      ],
      shareList: [
        {
          id: '0',
          img: require('./assets/home/img-two.png'),
          title: '保存本地'
        },
      ],
      isActive: 0,
      chooseShopImg: '',
      shopImgList: [],
      shopImg: '',
      shopImgId: '',
      center: '',
      isChoose: false
    };
  },
  mounted() {
    // const device_type = navigator.userAgent;
    // console.log("查看手机品牌", device_type);
    // this.getAAA();
    // const vConsole = new VConsole();
    this.getUrlParam();
    this.getList();
    this.getAgreementText();
    this.getSendButton();
    this.getRouterUrl()
  },
  created() {
    // this.getLocation();
    this.baseImgUrlObj = imageUrl;
    this.requestBaseUrl = baseUrl;
    console.log("hhhhhhhhhhhhhhh", this.baseImgUrlObj);
    // this.isShowSubmitState = true
    // this.showMask = true
    // this.isShowPopup = 1
    this.cityList = initCityPicker;
  },
  methods: {
    // 用户修改标签接口
    updateAppUserTag() {
      const axios = require('axios')
      axios.post('https://app.server.jkcae.com/app/updateAppUserTag', {
        user_id: this.appUserId,
        tag: 'package_kf_time'
      }, 'POST').then(res => {
        console.log('用户修改标签成功', res)
      })
    },

    // 获取海报接口
    getPosterList() {
      const axios = require('axios')
      axios.get('https://landing.app.jkcae.com/api/getPosterList?type=' + '2', 'GET').then(res => {
        console.log('获取海报接口成功', res)
        if (res.data.code == 1) {
          this.shopImgList = res.data.data
          this.shopImgId = res.data.data[0].id
          this.isActive = res.data.data[0].id
          this.getSmallShopPoster()
        } else {
          Toast(res.data.msg);
          return;
        }
      })
    },

    // 获取我的小店海报接口
    getSmallShopPoster() {
      let appUserId = this.appUserId
      // let nickname = this.nickName
      // let headImageUrl = this.headImageUrl
      let nickname = '集客仓用户'
      let headImageUrl = 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/avatar/A4o0AulnuhFp2s4xlp1mdI5EAkV19wsLNh7FVwF1.jpg'
      const axios = require('axios')
      axios.get('https://landing.app.jkcae.com/api/getSmallShopPoster?app_user_id=' + appUserId +
        '&nickname=' + nickname + '&head_image_url=' + headImageUrl + '&shop_poster_id=' + this
          .shopImgId, 'GET').then(res => {
            if (res.data.code == 1) {
              this.shopImg = res.data.data
              this.chooseShopImg = res.data.data
              this.isShowShareImg = true
              this.showMask = true
            } else {
              Toast(res.data.msg);
              return;
            }
          })
    },

    // 切换分享图
    handleComponents(item) {
      this.isActive = item.id
      // this.chooseShopImg = item.preview_img
      this.shopImgId = item.id
      this.getSmallShopPoster()
    },

    // 获取路由
    getRouterUrl() {
      const url = location.href
      console.log('获取路由啊66666666666666666', url)
    },

    getAAA() {
      const _this = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            console.log(
              "通过ip获取当前城市0000000......................：",
              result
            );
            // _this.autolocation = result.city;
          }
        });
      });
    },

    // 获取智能套餐
    getpackageList() {
      const that = this;
      const axios = require("axios");
      axios
        .post(
          "https://landing.app.jkcae.com/api/getSmartPackageList",
          {
            belonging_place: this.areasName,
            areas: this.areasName
              ? this.areasName
              : localStorage.getItem("address"),
            id_card: localStorage.getItem("idCard"),
          },
          "POST"
        )
        .then((res) => {
          if (res.data.code == 1) {
            that.popupPackageList = res.data.data;
            console.log("获取智能套餐成功", that.popupPackageList);
          } else {
            Toast(res.data.msg);
            return;
          }
        });
    },

    // 是否显示按钮和定义按钮文字
    getSendButton() {
      const axios = require("axios");
      axios
        .post(
          this.requestBaseUrl + "/api/sendButton",
          {
            buttonId: this.packageObj.buttonId,
          },
          "POST"
        )
        .then((res) => {
          console.log("是否显示按钮和定义按钮文字", res);
          if (res.data.code == 1) {
            this.fixedButton = res.data.data;
          } else {
            Toast(res.data.msg);
            return;
          }
        });
    },

    // 获取定位
    getLocation() {
      var geolocation = new window.qq.maps.Geolocation(
        "FJHBZ-AMPCZ-ZLHX6-ZMIYC-XAPQO-XWF2C",
        "myapp"
      );
      geolocation.getLocation(this.showPosition, this.errorPosition);
    },
    showPosition(position) {
      console.log("我去定位啊你是666666666666666", position);
      this.city =
        position.province + "-" + position.city + "-" + position.district;
      const simplifyCity =
        position.province.split("省")[0] + "," + position.city.split("市")[0];
      this.simplifyCity = simplifyCity;
      console.log("打印啊555555555555555", this.simplifyCity.split(",")[0]);

      // 对定位进行处理
      const areasStr =
        position.province.split("省")[0] + "," + position.city.split("市")[0];
      this.areasName = areasStr; // 省市名字

      this.chooseNumAddress =
        position.province.slice(0, 2) + "," + position.city.slice(0, 2);
      console.log("哈哈哈哈8888888888888888888", this.chooseNumAddress);

      // this.areasName = '' // 省市名字

      // this.longitude = position.lng;
      // this.latitude = position.lat;
      // this.city = position.city;
      // this.province = position.province;
      // this.district = position.district
      // this.getMobile();
    },
    errorPosition() {
      console.log("定位失败");
      //继续定位
      this.getLocation();
    },
    getUrlParam() {
      console.log("接收url的参数555555555555555555555", window.location.href);
      this.locationUrl = window.location.href
      const that = this;
      //为什么window.location.search取值为空？
      //“http://localhost:8080/#/page2?id=100&name=guanxy”那么使用window.location.search得到的就是空（“”）。
      // 因为“?id=100&name=guanxy”串字符是属于“#/page2?id=100&name=guanxy”这个串字符的，也就是说查询字符串search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。
      // 分销员中心传值
      this.center = that.getQueryString("center")
        ? that.getQueryString("center")
        : "";

      this.packageObj.packageId = that.getQueryString("packageId")
        ? that.getQueryString("packageId")
        : "";
      this.packageObj.clickId = that.getQueryString("clickid")
        ? that.getQueryString("clickid")
        : "";
      this.packageObj.buttonId = that.getQueryString("buttonId")
        ? that.getQueryString("buttonId")
        : "";
      this.landingTemplateId = that.getQueryString("landing_template_code")
        ? that.getQueryString("landing_template_code")
        : "";
      this.accountCode = that.getQueryString("account_code")
        ? that.getQueryString("account_code")
        : "";
      this.channeId = that.getQueryString("channe_id")
        ? that.getQueryString("channe_id")
        : "32";

      // app的用户id
      this.appUserId = that.getQueryString("app_user_id")
        ? that.getQueryString("app_user_id")
        : "";

      // app的用户名
      this.nickName = that.getQueryString("nick_name")
        ? that.getQueryString("nick_name")
        : "";

      // app的头像
      this.headImageUrl = that.getQueryString("header_image_url")
        ? that.getQueryString("header_image_url")
        : "";


      // 代理id
      this.agentId =
        that.getQueryString("agent_id") == "null"
          ? null
          : that.getQueryString("agent_id");

      console.log("查看接收代理id123123", this.agentId);

      // 我的小店的userId
      this.distributionId = that.getQueryString("distribution_id")
        ? that.getQueryString("distribution_id")
        : "";

      // 分享者的id
      this.fxuserId = that.getQueryString("fxuser_id")
        ? that.getQueryString("fxuser_id")
        : that.appUserId;
      console.log("分享者的id", this.fxuserId);

      // 套餐里面的校验拼音
      this.validName = that.getQueryString("valid_name")
        ? that.getQueryString("valid_name")
        : "";
      console.log("套餐里面的校验拼音", this.validName);

      // 用户级别
      this.userLevel = that.getQueryString("userLevel")
        ? that.getQueryString("userLevel")
        : "";
      console.log("套餐里面的校验拼音", this.userLevel);

      if (this.distributionId) {
        this.fxuserId = this.distributionId;
        console.log("现在有你", this.fxuserId);
      }

      // 佣金参数
      this.appYj = that.getQueryString("appYj") ? that.getQueryString("appYj") : ''
      console.log("套餐里面的校验拼音asddddddddddd", this.appYj);

      // 分享者的手机号
      this.phoneNum = that.getQueryString("app_fxuser_phone")
        ? that.getQueryString("app_fxuser_phone")
        : '';
      console.log("分享者的手机号", this.phoneNum);

      // app传过来的省市名字
      // this.areasName = that.getQueryString('areas') ? that.getQueryString('areas') : ''
      // console.log('接收省市', this.areasName)

      // console.log(this.packageObj.packageId)
      // console.log(this.packageObj.clickId)
      // console.log(this.landingTemplateId)
      // console.log(this.accountCode)
      // console.log(this.channeId)
    },

    // 用正则获取url参数
    getQueryString(name) {
      let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
      let url = window.location.href.split("?")[1].match(reg);
      // console.log(url)
      if (url != null) {
        return decodeURI(url[2]); //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
      } else {
        return null;
      }
    },

    // 用户心跳
    // getUserHeartbeat() {
    //   const axios = require('axios')
    //   axios.get(
    //       'https://app.server.jkcae.com/app/userHeartbeat?user_id=' + this.appUserId + '&page_tag='
    //   )
    // },

    // 立即购买
    handleBuy(val) {
      this.packageObj.packageId = val.id
      this.getList()
      this.isShowSubmitState = false
    },

    // 获取列表
    getList() {
      const axios = require("axios");
      const that = this;
      axios
        .get(
          `${this.requestBaseUrl}/api/getOnePackage?packageId=${that.packageObj.packageId}&channe_id=${that.channeId}`
        )
        .then(function (res) {
          that.isChoose = false
          if (res.data.code == 1) {
            that.packageAll = res.data.package;
            that.operatorId = res.data.package.operator_id;
            that.isShowPopup = res.data.package.operator_id;
            that.selectStatus = that.packageAll.select_status;
            let arr = []
            let sensitiveAreas = []
            arr = JSON.parse(that.packageAll.sensitive_areas)

            arr.forEach(item => {
              console.log("打印123", item);
              sensitiveAreas.push(item.address)
            })
            that.notShipAddressList = sensitiveAreas

            if (that.notShipAddressList.length == 0) {
              that.isShowAttention = false
            } else {
              that.isShowAttention = true
            }

            if (that.packageAll.select_status == 1) {
              that.getMobile();
            } else {
            }
          } else {
            Toast(res.data.msg);
            return;
          }
        });
    },

    // 获取号码列表
    getMobile() {
      const axios = require("axios");
      const that = this;
      axios
        .post(this.requestBaseUrl + "/api/appGetPhone", {
          hkgj_package_id: this.packageAll.hkgj_package_id,
          province: this.chooseNumAddress.split(",")[0],
          city: this.chooseNumAddress.split(",")[1],
          type: this.validName,
        })
        .then((res) => {
          if (res.data.code == 1) {
            console.log("获取号码列表成功", res);
            this.accountList = res.data.phoneList[this.nextIndex];
            console.log("获取号码列表成功2", this.accountList);
          } else {
            that.hahaCode = res.data.code;
            Toast(res.data.msg);
            return;
          }
        });

      // axios
      //   .post(
      //     this.requestBaseUrl + "/api/getMobile",
      //     {
      //       packageId: this.packageObj.packageId,
      //       num: this.searchValue, // 搜索传的号码
      //       type: this.accountType,
      //     },
      //     "POST"
      //   )
      //   .then((res) => {
      //     console.log(res, "asdsadas");
      //     const that = this;
      //     if (res.data.code == 1) {
      //       this.accountList = res.data.phoneList[that.nextIndex];
      //       console.log(this.accountList, "号码列表");
      //     } else {
      //       Toast(res.data.msg);
      //       return;
      //     }
      //   });
    },

    // 获取协议接口
    getAgreementText() {
      const axios = require("axios");
      const that = this;
      axios.get(this.requestBaseUrl + "/api/agreementText").then((res) => {
        console.log("获取协议成功", res);
        if (res.data.code == 1) {
          this.agreementObj = res.data;
        } else {
          Toast(res.data.msg);
          return;
        }
      });
    },

    // 获取用户海报图片
    getUserPoster() {
      const axios = require("axios");
      const that = this;
      axios
        .get(
          this.requestBaseUrl +
          "/api/createUserPoster?packageId=" +
          that.packageObj.packageId +
          "&fxuser_id=" +
          this.fxuserId +
          "&channe_id=" +
          this.channeId +
          "&app_user_id=" +
          this.appUserId +
          "&agent_id=" +
          this.agentId +
          "&valid_name=" +
          this.validName + "&app_fxuser_phone=" + this.phoneNum + "&agent_id=" + this.agentId
        )
        .then((res) => {
          console.log("打印用户海报图片", res);
          if (res.data.code == 1) {
            that.shareImg = res.data.data + "?v=" + this.timestamp;
            console.log('打印that.shareImg', that.shareImg)
            that.isShowShareImg = true;
            that.showMask = true;
          } else {
            Toast(res.data.msg);
            return;
          }
        });
    },

    // 客服链接接口
    getKefuUrl() {
      const axios = require('axios')
      axios.get('https://landing.app.jkcae.com/api/getKefuUrl?package_id=' + this.packageObj.packageId + '&user_id=' + this.appUserId + '&level=' + this.userLevel + '&type=' + '1' + '&tmp_url=' + encodeURIComponent(this.locationUrl), 'GET').then(res => {
        console.log('打印客服成功', res)
        location.href = res.data.data
      })
    },

    // Vue长按保存图片 start
    touchEnd() {
      //手指离开
      clearTimeout(this.timer);
    },
    touchStart() {
      //手指触摸
      clearTimeout(this.timer); //再次清空定时器，防止重复注册定时器
      this.timer = setTimeout(() => {
        this.downloadIamge(this.shareImg, "pic");
      }, 1000);
    },

    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      let image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = () => {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    // Vue长按保存图片 end

    // 分享
    handlerShare() {
      // this.getPosterList()
      this.getUserPoster();
    },

    // 关闭分享海报弹窗
    handlerCloseShare() {
      this.isShowShareImg = false;
      this.showMask = false;
    },

    // 关闭注意事项弹窗
    handleCloseAttention() {
      this.isShowAttention = false
    },

    // 提交
    submitOrderInsert() {
      Toast.loading({
        message: "提交中...",
        forbidClick: true,
        duration: 10000
      });
      localStorage.setItem("idCard", this.applicantModel.userInfo.number);
      localStorage.setItem("address", this.simplifyCity);
      const axios = require("axios");
      axios
        .post(
          this.requestBaseUrl + "/api/orderInsert",
          {
            app_user_id: this.appUserId, // app用户id
            agent_id: this.agentId, // 代理id
            idname: this.applicantModel.userInfo.name, // 身份证姓名
            idcard: this.applicantModel.userInfo.number, // 身份证号码
            address: this.city, // 省市区
            detail_address: this.applicantModel.userInfo.recipientsAddress, // 详细地址(
            mobile: this.applicantModel.userInfo.recipientsPhone, // 手机号
            name: this.applicantModel.userInfo.recipientsName, // 姓名
            packageId: this.packageObj.packageId, // 套餐id
            price: this.packageAll.price, // 价格
            renmian_path: "", // 人面照
            guohuimian_path: "", // 国徽照
            shouchimian_path: "", // 手持照
            phone: this.applicantModel.userInfo.chooseNum, // 选择的号码
            landing_template_code: this.landingTemplateId, // 模板id
            account_code: this.accountCode, // 账户code
            src: "1", // 订单来源
            belonging_place: this.areasName, // 归属地
            areas: this.areasName, // 区域
            hkgj_package_id: this.packageAll.hkgj_package_id
              ? this.packageAll.hkgj_package_id
              : "", // 套餐编码
            up_product_code: this.packageAll.up_product_code
              ? this.packageAll.up_product_code
              : "", // 局方编码
            fxuser_id: this.appUserId ? this.appUserId : this.fxuserId, // 分享者的id
            app_fxuser_phone: this.phoneNum ? this.phoneNum : '' // 分享者的手机号
          },
          "POST"
        )
        .then((res) => {
          if (res.data.code == 1) {
            this.isChoose = true
            Toast.clear()
            // 显示弹窗
            Dialog.confirm({
              title: "提示",
              message: this.appUserId
                ? res.data.msg
                : res.data.msg + "请前往应用商店下载 集客仓 App查询订单详情",
            })
              .then(() => {
                this.applicantModel.userInfo = {};
                this.city = "";
              })
              .catch(() => { });
          } else {
            this.isChoose = true
            Toast.clear()
            this.getpackageList();
            Toast(res.data.msg);
            this.isShowSubmitState = true;
            this.failTitle = res.data.msg;
            this.showMask = true;
            this.showAccount = false;
            return;
          }
        });
    },

    // 点击申请失败弹窗的套餐
    handlerChoosePackage(item, index) {
      console.log(item);
      this.packageObj.packageId = item.id;
      this.operatorId = item.operator_id;
      this.showMask = false;
      this.isShowSubmitState = false;
      this.getList();
    },

    // 判断是否预占
    getPreemption() {
      const axios = require("axios");
      axios
        .post(
          this.requestBaseUrl + "/api/preemption",
          {
            phonenum: this.applicantModel.userInfo.chooseNum,
            type: this.preemptionType,
          },
          "POST"
        )
        .then((res) => {
          console.log("预展成功", res);
          if (res.data.code == 1) {
          } else {
            Toast(res.data.msg);
            return;
          }
        });
    },

    // 切换号码
    handlerAccountList(item, index) {
      const that = this;
      this.isAccountList = item.id;
      this.applicantModel.userInfo.chooseNum = item.phoneNum;
      this.showAccount = true;
      this.showMask = true;

      setTimeout(() => {
        if (this.applicantModel.userInfo.recipientsName == "") {
          that.preemptionType = "1";
          that.getPreemption();
        }
      }, 5000);
      that.codeTime = 30;
      let timer = setInterval(() => {
        that.codeTime--;
        if (that.codeTime < 1) {
          clearInterval(timer);
          that.codeTime = 0;
        }
      }, 1000);
    },

    // 点击搜索
    handlerSearch() {
      this.getMobile();
    },

    // 点击领取按钮，谈到选号部分
    handlerReceive() {
      this.$el
        .querySelector("#packageBox")
        .scrollIntoView({ block: "start", behavior: "smooth" });
    },

    handlerFixed() {
      const that = this;
      this.applicantModel.userInfo.chooseNum = this.accountList[0].phoneNum;
      this.showAccount = true;
      this.showMask = true;

      setTimeout(() => {
        if (this.applicantModel.userInfo.recipientsName == "") {
          that.preemptionType = "1";
          that.getPreemption();
        }
      }, 5000);
      that.codeTime = 30;
      let timer = setInterval(() => {
        that.codeTime--;
        if (that.codeTime < 1) {
          clearInterval(timer);
          that.codeTime = 0;
        }
      }, 1000);
    },

    // 选择靓卡类型
    handlerAccountTab(val) {
      this.isActiveAcount = val.id;
      this.accountType = val.type;
      this.getMobile();
    },

    // 上一页
    handlerPrevious() {
      const that = this;
      if (this.nextIndex === 0) {
        this.isPreviousBtn = true;
        return;
      }
      this.nextIndex--;
      this.isNextBtn = false;
      Toast({
        message: "加载中...",
        duration: 250,
      });
      that.getMobile();
    },

    // 下一页
    handlerNext() {
      const that = this;
      if (this.nextIndex === 9) {
        this.isNextBtn = true;
        return;
      }
      this.nextIndex++;
      this.isPreviousBtn = false;
      Toast({
        message: "加载中...",
        duration: 250,
      });
      that.getMobile();
    },

    handlerBlurName() {
      const that = this;
      if (this.codeTime > 0) {
      } else {
        if (this.applicantModel.userInfo.recipientsName !== "") {
          this.preemptionType = "2";
          this.getPreemption();
          // this.phoneDisabled = false

          that.codeTime = 120;
          let timer = setInterval(() => {
            that.codeTime--;
            if (that.codeTime < 1) {
              clearInterval(timer);
              that.codeTime = 0;
            }
          }, 1000);
        } else if (this.applicantModel.userInfo.recipientsName == "") {
          this.preemptionType = "1";
          this.getPreemption();
          // this.phoneDisabled = true

          that.codeTime = 30;
          let timer = setInterval(() => {
            that.codeTime--;
            if (that.codeTime < 1) {
              clearInterval(timer);
              that.codeTime = 0;
            }
          }, 1000);
        }
      }
    },

    // 输入完姓名和手机号，判断是否显示隐藏内容
    blurName(e) {
      this.blurNameMsg = e.target.value;
      var myreg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (this.blurNameMsg !== "" && myreg.test(this.blurPhoneMsg)) {
        this.isShowPersonMsg = true;
      }
    },

    blurPhone(e) {
      var myreg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      this.blurPhoneMsg = e.target.value;
      if (this.blurNameMsg !== "" && myreg.test(this.blurPhoneMsg)) {
        this.isShowPersonMsg = true;
      }
    },

    // 入网协议
    handlerAgreement() {
      this.agreementMsg = this.agreementObj.text1;
      this.showAgreement = true;
      this.showMaskAgreement = true;
    },
    // 信息收集公共
    handlerCollect() {
      this.agreementMsg = this.agreementObj.text2;
      this.showAgreement = true;
      this.showMaskAgreement = true;
    },

    // 关闭弹窗，清空信息
    handlerCloseAccount() {
      this.applicantModel.userInfo = {};
      this.city = "";
      this.checkMsg = false;
      setTimeout(() => {
        this.isShowPersonMsg = false;
      }, 1200);
    },

    handlerPicker() {
      const pickCIty = document.getElementsByClassName("city_picker_box");
      pickCIty[0].style.display = "block";
    },

    // 选择省市区
    confirmPicker(e) {
      this.city = e[0] + e[1] + e[2];
      const pickCIty = document.getElementsByClassName("city_picker_box");
      pickCIty[0].style.display = "none";
    },

    // 取消省市区
    cancelPicker() {
      // this.isShowPicker = false
      const pickCIty = document.getElementsByClassName("city_picker_box");
      pickCIty[0].style.display = "none";
    },

    // 关闭弹窗
    handlerClosePopup() {
      this.isShowSubmitState = false;
      this.showAccount = false;
      this.showMask = false;
      this.isShowShareImg = false;
    },

    // 点击查号关闭弹窗
    handleCloseShop() {
      this.isShowSubmitState = false;
      this.showAccount = false;
      this.showMask = false;
      this.isShowShareImg = false;
    },

    // 刷新套餐按钮
    handlerRefresh() {
      Toast("刷新套餐...");
    },

    // 点击叉号关闭选号弹窗
    handlerCloseChoose() {
      this.showAccount = false;
      this.showMask = false;
      this.isShowShareImg = false;
    },

    // 点击叉号和遮罩层2关闭弹窗
    handlerCloseAgreement() {
      this.showAgreement = false;
      this.showMaskAgreement = false;
    },

    submit() {
      const that = this;

      if (this.applicantModel.userInfo.recipientsName == "") {
        Toast("请输入姓名");
        return;
      } else if (this.applicantModel.userInfo.recipientsPhone == "") {
        Toast("请输入收件电话");
        return;
      } else if (this.applicantModel.userInfo.recipientsPhone.length !== 11) {
        Toast("请输入11位收件电话");
        return;
      } else if (this.applicantModel.userInfo.name == "") {
        Toast("请输入身份证姓名");
        return;
      } else if (this.applicantModel.userInfo.number == "") {
        Toast("请输入身份证号码");
        return;
      } else if (this.applicantModel.userInfo.number.length !== 18) {
        Toast("请输入18位身份证号码");
        return;
      } else if (this.city == "") {
        Toast("请选择地址");
        return;
      } else if (this.applicantModel.userInfo.recipientsAddress == "") {
        Toast("请输入详细地址");
        return;
      } else if (this.checkMsg == false) {
        Toast("请选择我已阅读并同意");
        return;
      }


      if (this.isChoose == true) {
        Toast('您已经参加过活动，请看看其他套餐吧')
        return
      } else {
        that.submitOrderInsert();
      }

    },

    // 客服跳转
    handleCustom() {
      this.updateAppUserTag()
      this.getKefuUrl()
    }
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "my-font";
  src: url("~@/assets/DIN ALTERNATE BOLD.TTF");
}

#app {
  position: relative;
  width: 100%;
  height: 100%;
  // background: #ebebeb;/
  // 页面置灰
  // -webkit-filter: grayscale(100%); /* webkit */
  // -moz-filter: grayscale(100%); /*firefox*/
  // -ms-filter: grayscale(100%); /*ie9*/
  // -o-filter: grayscale(100%); /* opera */
  // filter: grayscale(100%);
  // filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
  // filter:gray; /*ie9- */

  .no_package {
    color: #ccc;
    font-size: 26px;
    text-align: center;
    padding: 30px 0 0;
  }

  input {
    border: 0px;
  }

  .input_size {
    font-size: 12px;
  }

  .package_detail_box {
    .banner_img_box {
      width: 100%;
      // height: 380px;

      .banner_img {
        width: 100%;
        height: 100%;
      }
    }

    .commission_box {
      display: flex;
      align-items: center;
      color: #fff;
      padding: 10px 0 10px 5px;
      margin-bottom: 3px;

      .commission_img_box {
        width: 60px;
        height: 60px;
        margin-right: 5px;

        .commission_img {
          width: 100%;
          height: 100%;
        }
      }

      .commission_title_box {
        .commission_title {
          font-size: 15px;
          padding-bottom: 5px;
        }

        .commission_tip {
          font-size: 16px;
        }
      }
    }

    .attention_box {
      padding: 10px;

      .attention_all {
        display: flex;
        align-items: center;
        background: #fff;
        border-radius: 12px;
        padding: 10px;

        .attention_title {
          color: #fff;
          font-weight: 550;
          padding: 5px;
          border-radius: 8px;
        }

        .attention_con {
          padding-left: 20px;
        }
      }
    }

    .account_box {
      padding: 32px 10px 10px;
      margin-top: 0;
      position: relative;
      background: linear-gradient(180deg, #ff9c2f, #ff571c);

      .account_tip_img_box {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 220px;
        height: 38px;

        .account_tip_img {
          width: 100%;
          height: 100%;
        }
      }

      .popup_account_all {
        background: #ffffff;
        border-radius: 10px;
        padding: 20px 20px 0;

        .buy-applicant-input-box {
          display: flex;
          align-items: center;
          margin-bottom: 13px;
          border-bottom: 1px solid #f0f0f0;
          padding-bottom: 10px;

          .buy-applicant-input-title {
            width: 116px;
            font-size: 15px;
            // margin-right: 55rpx;
          }
        }

        .buy-recipients-all {
          display: flex;
          align-items: center;
          margin-bottom: 7px;
          padding: 5px 0 10px;
          border-bottom: 1px solid #f0f0f0;

          .buy-recipients-input-title {
            width: 116px;
            font-size: 15px;
          }

          .buy_input_code_input_send {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #4786ff;
          }

          .city_picker_box {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 999;
          }
        }

        .read_box {
          padding-bottom: 10px;

          .read_check {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 13px;
            color: #262626;

            .read_msg {
              color: #577ef3;
            }

            ::v-deep .u-checkbox__label {
              font-size: 12px;
            }
          }

          .submit_box {
            display: flex;
            justify-content: center;
            padding-top: 33px;

            .submit_img {
              width: 231px;
              height: 47px;
            }
          }
        }
      }
    }

    .account_two_box {
      padding: 32px 10px 10px;
      margin-top: -6px;
      position: relative;
      background: linear-gradient(176deg, #f62927, #ff674b);

      .account_tip_img_box {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 220px;
        height: 38px;

        .account_tip_img {
          width: 100%;
          height: 100%;
        }
      }

      .popup_account_all {
        background: #ffffff;
        border-radius: 10px;
        padding: 20px 20px 0;

        .buy-applicant-input-box {
          display: flex;
          align-items: center;
          margin-bottom: 13px;
          border-bottom: 1px solid #f0f0f0;
          padding-bottom: 10px;

          .buy-applicant-input-title {
            width: 116px;
            font-size: 15px;
            // margin-right: 55rpx;
          }
        }

        .buy-recipients-all {
          display: flex;
          align-items: center;
          margin-bottom: 7px;
          padding: 5px 0 10px;
          border-bottom: 1px solid #f0f0f0;

          .buy-recipients-input-title {
            width: 116px;
            font-size: 15px;
          }

          .buy_input_code_input_send {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #4786ff;
          }

          .city_picker_box {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 999;
          }
        }

        .read_box {
          padding-bottom: 10px;

          .read_check {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 13px;
            color: #262626;

            .read_msg {
              color: #577ef3;
            }

            ::v-deep .u-checkbox__label {
              font-size: 12px;
            }
          }

          .submit_box {
            display: flex;
            justify-content: center;
            padding-top: 33px;

            .submit_img {
              width: 231px;
              height: 47px;
            }
          }
        }
      }
    }

    .account_three_box {
      padding: 32px 10px 10px;
      margin-top: -4px;
      position: relative;
      background: linear-gradient(180deg, #89d6ff, #2a9cf5);

      .account_tip_img_box {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 220px;
        height: 38px;

        .account_tip_img {
          width: 100%;
          height: 100%;
        }
      }

      .popup_account_all {
        background: #ffffff;
        border-radius: 10px;
        padding: 20px 20px 0;

        .buy-applicant-input-box {
          display: flex;
          align-items: center;
          margin-bottom: 13px;
          border-bottom: 1px solid #f0f0f0;
          padding-bottom: 10px;

          .buy-applicant-input-title {
            width: 116px;
            font-size: 15px;
            // margin-right: 55rpx;
          }
        }

        .buy-recipients-all {
          display: flex;
          align-items: center;
          margin-bottom: 7px;
          padding: 5px 0 10px;
          border-bottom: 1px solid #f0f0f0;

          .buy-recipients-input-title {
            width: 116px;
            font-size: 15px;
          }

          .buy_input_code_input_send {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #4786ff;
          }

          .city_picker_box {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 999;
          }
        }

        .read_box {
          padding-bottom: 10px;

          .read_check {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 13px;
            color: #262626;

            .read_msg {
              color: #577ef3;
            }

            ::v-deep .u-checkbox__label {
              font-size: 12px;
            }
          }

          .submit_box {
            display: flex;
            justify-content: center;
            padding-top: 33px;

            .submit_img {
              width: 231px;
              height: 47px;
            }
          }
        }
      }
    }

    .account_four_box {
      padding: 32px 10px 10px;
      margin-top: -4px;
      position: relative;
      background: #1c1206;

      .account_tip_img_box {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 220px;
        height: 38px;

        .account_tip_img {
          width: 100%;
          height: 100%;
        }
      }

      .popup_account_all {
        background: #ffffff;
        border-radius: 10px;
        padding: 20px 20px 0;

        .buy-applicant-input-box {
          display: flex;
          align-items: center;
          margin-bottom: 13px;
          border-bottom: 1px solid #f0f0f0;
          padding-bottom: 10px;

          .buy-applicant-input-title {
            width: 116px;
            font-size: 15px;
            // margin-right: 55rpx;
          }
        }

        .buy-recipients-all {
          display: flex;
          align-items: center;
          margin-bottom: 7px;
          padding: 5px 0 10px;
          border-bottom: 1px solid #f0f0f0;

          .buy-recipients-input-title {
            width: 116px;
            font-size: 15px;
          }

          .buy_input_code_input_send {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #4786ff;
          }

          .city_picker_box {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 999;
          }
        }

        .read_box {
          padding-bottom: 10px;

          .read_check {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 13px;
            color: #262626;

            .read_msg {
              color: #577ef3;
            }

            ::v-deep .u-checkbox__label {
              font-size: 12px;
            }
          }

          .submit_box {
            display: flex;
            justify-content: center;
            padding-top: 33px;

            .submit_img {
              width: 231px;
              height: 47px;
            }
          }
        }
      }
    }

    .account_five_box {
      padding: 32px 10px 10px;
      margin-top: -4px;
      position: relative;
      background: linear-gradient(180deg, #cfdeff, #7ca5ff);

      .account_tip_img_box {
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 220px;
        height: 38px;

        .account_tip_img {
          width: 100%;
          height: 100%;
        }
      }

      .popup_account_all {
        background: #ffffff;
        border-radius: 10px;
        padding: 20px 20px 0;

        .buy-applicant-input-box {
          display: flex;
          align-items: center;
          margin-bottom: 13px;
          border-bottom: 1px solid #f0f0f0;
          padding-bottom: 10px;

          .buy-applicant-input-title {
            width: 116px;
            font-size: 15px;
            // margin-right: 55rpx;
          }
        }

        .buy-recipients-all {
          display: flex;
          align-items: center;
          margin-bottom: 7px;
          padding: 5px 0 10px;
          border-bottom: 1px solid #f0f0f0;

          .buy-recipients-input-title {
            width: 116px;
            font-size: 15px;
          }

          .buy_input_code_input_send {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #4786ff;
          }

          .city_picker_box {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 999;
          }
        }

        .read_box {
          padding-bottom: 10px;

          .read_check {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 13px;
            color: #262626;

            .read_msg {
              color: #577ef3;
            }

            ::v-deep .u-checkbox__label {
              font-size: 12px;
            }
          }

          .submit_box {
            display: flex;
            justify-content: center;
            padding-top: 33px;

            .submit_img {
              width: 231px;
              height: 47px;
            }
          }
        }
      }
    }

    .package_type_one {
      padding: 21px 15px 14px;
      margin-top: -4px;
      background: linear-gradient(180deg, #ff9c2f, #ff571c);

      .package_search_box {
        border-radius: 7px;
        padding: 0 5px;

        .search_all {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          padding-bottom: 10px;

          .search_input {
            width: 250px;
            border: 1px solid #ffd978;
            border-radius: 5px 0 0 5px;
          }

          .search_btn {
            width: 69px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            font-family: Source Han Sans CN;
            background: linear-gradient(180deg, #fc9320, #ee480e);
            border-radius: 0 5px 5px 0;
          }
        }

        .account_tab_all {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-bottom: 15px;

          .account_tab {
            width: 55px;
            height: 24px;
            background: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #b3b3b3;
            text-align: center;
            line-height: 24px;
            margin: 0 11px 5px 0;
          }

          .account_tab_active {
            width: 55px;
            height: 24px;
            background: linear-gradient(180deg, #fc9320, #ee480e);
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 24px;
          }
        }
      }

      .account_list_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .account_list_all {
          // width: 157px;
          // height: 56px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 5px;
          padding: 10px 10px 9px 13px;
          margin-bottom: 9px;

          .account_num {
            font-size: 18px;
            font-family: my-font;
            font-weight: bold;
            color: #4d4d4d;
          }

          .account_num_active {
            font-size: 18px;
            color: #ff7900;
            font-family: my-font;
            font-weight: bold;
          }

          .account_tip_box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .limited_time {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #b3b3b3;
              padding-right: 39px;
            }

            .free_collection {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #d82323;
            }
          }
        }
      }

      .package_page_box {
        display: flex;
        justify-content: center;

        .previous_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 12px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ff6602;
          margin-right: 9px;
        }

        .next_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 12px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ff6602;
        }
      }
    }

    // 套餐2
    .package_type_two {
      margin-top: -6px;
      padding: 21px 15px 14px;
      background: linear-gradient(176deg, #f62927, #ff674b);

      .package_search_box {
        border-radius: 7px;
        padding: 0 5px;

        .search_all {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          padding-bottom: 10px;

          .search_input {
            width: 250px;
            border: 1px solid #ffd978;
            border-radius: 5px 0 0 5px;
          }

          .search_btn {
            width: 69px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            font-family: Source Han Sans CN;
            background: linear-gradient(180deg, #fc9320, #ee480e);
            border-radius: 0 5px 5px 0;
          }
        }

        .account_tab_all {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-bottom: 15px;

          .account_tab {
            width: 55px;
            height: 24px;
            background: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #b3b3b3;
            text-align: center;
            line-height: 24px;
            margin: 0 11px 5px 0;
          }

          .account_tab_active {
            width: 55px;
            height: 24px;
            background: linear-gradient(180deg, #fc9320, #ee480e);
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 24px;
          }
        }
      }

      .account_list_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .account_list_all {
          // width: 157px;
          // height: 56px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 5px;
          padding: 10px 10px 9px 13px;
          margin-bottom: 9px;

          .account_num {
            font-size: 18px;
            font-family: my-font;
            font-weight: bold;
            color: #4d4d4d;
          }

          .account_num_active {
            font-size: 18px;
            color: #ff7900;
            font-family: my-font;
            font-weight: bold;
          }

          .account_tip_box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .limited_time {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #b3b3b3;
              padding-right: 39px;
            }

            .free_collection {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #d82323;
            }
          }
        }
      }

      .package_page_box {
        display: flex;
        justify-content: center;

        .previous_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 13px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ec3d1e;
          margin-right: 9px;
        }

        .next_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 13px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ec3d1e;
        }
      }
    }

    // 套餐3
    .package_type_three {
      margin-top: -4px;
      padding: 21px 15px 14px;
      background: linear-gradient(180deg, #89d6ff, #2a9cf5);

      .package_search_box {
        border-radius: 7px;
        padding: 0 5px;

        .search_all {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          padding-bottom: 10px;

          .search_input {
            width: 250px;
            border: 1px solid #149dff;
            border-radius: 5px 0 0 5px;
          }

          .search_btn {
            width: 69px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            font-family: Source Han Sans CN;
            background: #149dff;
            border-radius: 0 5px 5px 0;
          }
        }

        .account_tab_all {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-bottom: 15px;

          .account_tab {
            width: 55px;
            height: 24px;
            background: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #b3b3b3;
            text-align: center;
            line-height: 24px;
            margin: 0 11px 5px 0;
          }

          .account_tab_active {
            width: 55px;
            height: 24px;
            background: #149dff;
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 24px;
          }
        }
      }

      .account_list_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .account_list_all {
          // width: 157px;
          // height: 56px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 5px;
          padding: 10px 10px 9px 13px;
          margin-bottom: 9px;

          .account_num {
            font-size: 18px;
            font-family: my-font;
            font-weight: bold;
            color: #4d4d4d;
          }

          .account_num_active {
            font-size: 18px;
            color: #ff7900;
            font-family: my-font;
            font-weight: bold;
          }

          .account_tip_box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .limited_time {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #b3b3b3;
              padding-right: 39px;
            }

            .free_collection {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #d82323;
            }
          }
        }
      }

      .package_page_box {
        display: flex;
        justify-content: center;

        .previous_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 13px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #38acff;
          margin-right: 9px;
        }

        .next_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 13px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #38acff;
        }
      }
    }

    // 套餐4
    .package_type_four {
      margin-top: -4px;
      padding: 21px 15px 14px;
      background: #1c1206;

      .package_search_box {
        border-radius: 7px;
        padding: 0 5px;

        .search_all {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          padding-bottom: 10px;

          .search_input {
            width: 250px;
            border: 1px solid #e2a76a;
            border-radius: 5px 0 0 5px;
          }

          .search_btn {
            width: 69px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            font-family: Source Han Sans CN;
            background: #e2a76a;
            border-radius: 0 5px 5px 0;
          }
        }

        .account_tab_all {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-bottom: 15px;

          .account_tab {
            width: 55px;
            height: 24px;
            background: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #b3b3b3;
            text-align: center;
            line-height: 24px;
            margin: 0 11px 5px 0;
          }

          .account_tab_active {
            width: 55px;
            height: 24px;
            background: #e2a76a;
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 24px;
          }
        }
      }

      .account_list_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .account_list_all {
          // width: 157px;
          // height: 56px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 5px;
          padding: 10px 10px 9px 13px;
          margin-bottom: 9px;

          .account_num {
            font-size: 18px;
            font-family: my-font;
            font-weight: bold;
            color: #4d4d4d;
          }

          .account_num_active {
            font-size: 18px;
            color: #ff7900;
            font-family: my-font;
            font-weight: bold;
          }

          .account_tip_box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .limited_time {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #b3b3b3;
              padding-right: 39px;
            }

            .free_collection {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #d82323;
            }
          }
        }
      }

      .package_page_box {
        display: flex;
        justify-content: center;

        .previous_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 13px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #e2a76a;
          margin-right: 9px;
        }

        .next_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 13px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #e2a76a;
        }
      }
    }

    // 套餐5
    .package_type_five {
      margin-top: -4px;
      padding: 21px 15px 14px;
      background: linear-gradient(180deg, #cfdeff, #7ca5ff);

      .package_search_box {
        border-radius: 7px;
        padding: 0 5px;

        .search_all {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 36px;
          padding-bottom: 10px;

          .search_input {
            width: 250px;
            border: 1px solid #66a0ff;
            border-radius: 5px 0 0 5px;
          }

          .search_btn {
            width: 69px;
            color: #fff;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            font-family: Source Han Sans CN;
            background: #66a0ff;
            border-radius: 0 5px 5px 0;
          }
        }

        .account_tab_all {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-bottom: 15px;

          .account_tab {
            width: 55px;
            height: 24px;
            background: #ffffff;
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #b3b3b3;
            text-align: center;
            line-height: 24px;
            margin: 0 11px 5px 0;
          }

          .account_tab_active {
            width: 55px;
            height: 24px;
            background: #66a0ff;
            border: 1px solid #ffffff;
            border-radius: 12px;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
            text-align: center;
            line-height: 24px;
          }
        }
      }

      .account_list_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        .account_list_all {
          // width: 157px;
          // height: 56px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 5px;
          padding: 10px 10px 9px 13px;
          margin-bottom: 9px;

          .account_num {
            font-size: 18px;
            font-family: my-font;
            font-weight: bold;
            color: #4d4d4d;
          }

          .account_num_active {
            font-size: 18px;
            color: #ff7900;
            font-family: my-font;
            font-weight: bold;
          }

          .account_tip_box {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .limited_time {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #b3b3b3;
              padding-right: 39px;
            }

            .free_collection {
              font-size: 12px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #d82323;
            }
          }
        }
      }

      .package_page_box {
        display: flex;
        justify-content: center;

        .previous_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 13px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #66a0ff;
          margin-right: 9px;
        }

        .next_page {
          width: 157px;
          height: 26px;
          background: #ffffff;
          border: 1px solid #ffffff;
          border-radius: 13px;
          text-align: center;
          line-height: 14px;
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #66a0ff;
        }
      }
    }
  }

  ::v-deep .van-popup__close-icon {
    font-size: 25px;
    color: #000;
  }

  .popup_account_box {
    .popup_account_all {
      padding: 35px 20px 0;

      .selected_box {
        display: flex;
        align-items: center;
        font-size: 30 rpx;

        .selected_title {
          color: #000;
          padding-right: 5px;
        }

        .selected_number {
          display: flex;
          align-items: center;
          font-size: 18px;

          .number_title {
            color: #dd5e7c;
            padding-right: 5px;
          }

          .number_tip {}
        }
      }

      .acount_con {
        font-size: 13px;
        color: #888;
        text-align: center;
        padding: 10px 0 15px;
      }

      .buy-applicant-input-box {
        display: flex;
        align-items: center;
        margin-bottom: 13px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;

        .buy-applicant-input-title {
          width: 116px;
          font-size: 15px;
          // margin-right: 55rpx;
        }
      }

      .buy-recipients-all {
        display: flex;
        align-items: center;
        margin-bottom: 15 rpx;
        padding: 10px 0;
        border-bottom: 1px solid #f0f0f0;

        .buy-recipients-input-title {
          width: 116px;
          font-size: 15px;
        }

        .buy_input_code_input_send {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #4786ff;
        }

        .city_picker_box {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          z-index: 999;
        }
      }

      .read_box {
        padding-bottom: 10px;

        .read_check {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 13px;
          color: #262626;
          padding-top: 10px;

          .read_msg {
            color: #577ef3;
          }

          ::v-deep .u-checkbox__label {
            font-size: 12px;
          }
        }

        .submit_box {
          display: flex;
          justify-content: center;
          padding-top: 34px;

          .submit_img {
            width: 232px;
            height: 47px;
          }
        }
      }
    }
  }

  .flow_path_box {
    padding: 8px 8px 0;

    .flow_path_img_box {
      width: 100%;
      // height: 120px;

      .flow_path_img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .detail_img_box {
    margin-top: -8px;
    padding-bottom: 50px;

    ::v-deep img {
      width: 100%;
      height: 100%;
    }
  }

  .popup_agreement_box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    background: #fff;
    border-radius: 8px;
    padding: 30px 20px;
    width: 316px;
    height: 70%;
    overflow: scroll;

    .popup_agreement {}

    .close_btn_box {
      position: absolute;
      top: -40px;
      right: 0;
      width: 26px;
      height: 26px;
      z-index: 1001;

      .close_btn {
        width: 100%;
        height: 100%;
      }
    }
  }

  .popup_choose_box {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 360px;

    .popup_choose_all {
      background: #fff;
      border-radius: 8px;
      padding: 20px 20px 0;

      .top_box {
        display: flex;
        align-items: center;
        font-size: 15px;

        .boutique_title {
          color: #000;
          font-size: 16px;
          font-weight: 550;
          padding: 0 5px 0 5px;
        }
      }

      .boutique_phone {
        font-size: 20px;
        font-weight: 700;
        color: #dd5e7c;
        text-align: center;
        padding: 10px 0;
      }

      .acount_con {
        font-size: 12px;
        color: #757575;
        text-align: center;
        padding-bottom: 15px;
      }

      .buy-recipients-all {
        display: flex;
        align-items: center;
        margin-bottom: 7px;
        padding: 5px 0 10px;
        border-bottom: 1px solid #f0f0f0;

        .buy-recipients-input-title {
          width: 116px;
          font-size: 15px;
        }

        .buy_input_code_input_send {
          font-size: 12px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #4786ff;
        }

        .city_picker_box {
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          z-index: 999;
        }
      }

      .buy-applicant-input-box {
        display: flex;
        align-items: center;
        margin-bottom: 7px;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 10px;

        .buy-applicant-input-title {
          width: 116px;
          font-size: 15px;
          // margin-right: 55rpx;
        }
      }

      .read_box {
        padding-bottom: 10px;

        .read_check {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 13px;
          color: #262626;

          .read_msg {
            color: #577ef3;
          }

          ::v-deep .u-checkbox__label {
            font-size: 12px;
          }
        }

        .submit_box {
          display: flex;
          justify-content: center;
          padding-top: 33px;

          .submit_img {
            width: 231px;
            height: 47px;
          }
        }
      }
    }

    .close_btn_box {
      position: absolute;
      top: -40px;
      right: 0;
      width: 26px;
      height: 26px;
      z-index: 1001;

      .close_btn {
        width: 100%;
        height: 100%;
      }
    }
  }

  .receive_btn_box {
    position: fixed;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 354px;
    height: 41px;
    background: linear-gradient(180deg, #fc9320, #ee480e);
    border-radius: 21px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 41px;
  }

  .receive_btn_two_box {
    position: fixed;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 354px;
    height: 41px;
    background: linear-gradient(176deg, #f62927, #ff674b);
    border-radius: 21px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 41px;
  }

  .receive_btn_three_box {
    position: fixed;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 354px;
    height: 41px;
    background: linear-gradient(180deg, #91d8ff, #0692ff);
    border-radius: 21px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 41px;
  }

  .receive_btn_four_box {
    position: fixed;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 354px;
    height: 41px;
    background: linear-gradient(-2deg, #ffbb74, #ba7a38);
    border-radius: 21px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 41px;
  }

  .receive_btn_five_box {
    position: fixed;
    bottom: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 354px;
    height: 41px;
    background: linear-gradient(180deg, #9ab6ff, #4b7cff);
    border-radius: 21px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    line-height: 41px;
  }

  .share_box {
    position: fixed;
    bottom: 16%;
    right: 0;

    .share_img_box {
      width: 70px;
      height: 70px;

      .share_img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .custom_box {
    position: fixed;
    bottom: 32%;
    right: 0;

    .custom_img_box {
      width: 70px;
      height: 70px;

      .custom_img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .popup_submit_box {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;

    .popup_close_box {
      position: absolute;
      top: -36px;
      right: 0;
      width: 26px;
      height: 26px;

      .popup_close {
        width: 100%;
        height: 100%;
      }
    }

    .popup_submit_all {
      .submit_title_box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 359px;
        background: #ffffff;
        border-radius: 5px 5px 0px 0px;
        padding: 21px 0 16px;

        .left_box {
          width: 42px;
          height: 40px;
          margin-right: 12px;

          .left_img {
            width: 100%;
            height: 100%;
          }
        }

        .right_box {
          .right_title {
            font-size: 19px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ee480e;
            padding-bottom: 8px;
          }

          .right_tip {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
          }
        }
      }

      .popup_recommend_box {
        background: #f5f5f5;
        padding: 16px 9px 19px 9px;
        border-radius: 0 0 5px 5px;

        .recommend_title_box {
          display: flex;
          align-items: flex-end;
          padding-bottom: 16px;

          .recommend_left_title {
            font-size: 20px;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #f46816;
            padding-right: 13px;
          }

          .recommend_right_title {
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #f46816;
          }
        }

        .popup_package_one_box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          height: 57vh;
          // height: 390px;
          overflow: scroll;

          .popup_package_all {
            width: 162px;
            background: #ffffff;
            border: 1px solid #fafafa;
            border-radius: 6px;
            padding: 15px 0 12px;
            margin-bottom: 5px;

            .package_img_box {
              width: 143px;
              height: 143px;
              margin: 0 auto;

              .package_img {
                width: 100%;
                height: 100%;
              }
            }

            .package_title {
              font-size: 13px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #333333;
              margin: 12px 8px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }

            .package_tip_box {
              display: flex;
              align-items: center;
              padding-left: 8px;

              .package_tip {
                background: #e0f3ff;
                border: 1px solid #ffffff;
                border-radius: 5px;
                font-size: 9px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #27a6ff;
                text-align: center;
                padding: 3px 5px;
                margin-right: 6px;
              }
            }

            .package_introduce {
              font-size: 10px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              margin: 6px 8px 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .package_price_box {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 8px;

              .package_price {
                font-size: 10px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-family: my-font;
                color: #fc3838;
              }

              .package_count {
                font-size: 10px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-family: my-font;
                color: #808080;
              }
            }
          }
        }

        .popup_package_two_box {
          display: flex;
          align-items: center;
          // justify-content: space-between;
          flex-wrap: wrap;
          height: 57vh;
          overflow: scroll;

          .popup_package_all {
            width: 108px;
            background: #ffffff;
            border: 1px solid #fafafa;
            border-radius: 6px;
            padding: 15px 4px 12px;
            margin-bottom: 5px;

            .package_img_box {
              width: 94px;
              height: 94px;
              margin: 0 auto;

              .package_img {
                width: 100%;
                height: 100%;
              }
            }

            .package_title {
              font-size: 8px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #333333;
              margin: 12px 8px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }

            .package_tip_all {
              display: flex;
              align-items: center;

              .package_tip_box {
                padding-left: 2px;

                .package_tip {
                  background: #e0f3ff;
                  border: 1px solid #ffffff;
                  border-radius: 5px;
                  font-size: 6px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #27a6ff;
                  text-align: center;
                  padding: 3px 1px;
                }
              }
            }

            .package_introduce {
              font-size: 6px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #333333;
              margin: 6px 8px 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }

            .package_price_box {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 0 3px;

              .package_price {
                font-size: 6px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-family: my-font;
                color: #fc3838;
              }

              .package_count {
                font-size: 6px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                font-family: my-font;
                color: #808080;
              }
            }
          }
        }

        .popup_package_three_box {
          height: 57vh;
          overflow: scroll;

          .popup_package_three_all {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #ffffff;
            border: 1px solid #fafafa;
            border-radius: 6px;
            padding: 8px 14px 11px 6px;
            margin-bottom: 5px;

            .left_box {
              width: 97px;
              height: 97px;

              .left_img {
                width: 100%;
                height: 100%;
              }
            }

            .right_box {
              .package_title {
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 500;
                color: #333333;
              }

              .package_tip_box {
                display: flex;
                align-items: center;
                margin: 7px 0;

                .package_tip {
                  font-size: 9px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #438aff;
                  background: #e4edff;
                  border: 1px solid #ffffff;
                  border-radius: 5px;
                  padding: 1px 5px;
                }
              }

              .package_introduce {
                width: 209px;
                font-size: 11px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333;
                font-family: my-font;
              }

              .package_price_box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 13px;

                .price_box {
                  display: flex;
                  align-items: center;

                  .package_price {
                    font-size: 10px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #fc3838;
                    padding-right: 21px;
                    font-family: my-font;
                  }

                  .package_count {
                    font-size: 10px;
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    color: #808080;
                    font-family: my-font;
                  }
                }

                .price_buy_btn {
                  width: 67px;
                  height: 21px;
                  background: linear-gradient(180deg, #fc9320, #ee480e);
                  border: 1px solid #ffffff;
                  border-radius: 11px;
                  font-size: 12px;
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  color: #ffffff;
                  text-align: center;
                  line-height: 21px;
                }
              }
            }
          }
        }

        .popup_refresh_box {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 19px 0 0;

          .refresh_icon_box {
            width: 16px;
            height: 14px;
            margin-right: 11px;

            .refresh_icon {
              width: 100%;
              height: 100%;
            }
          }

          .refresh_title {
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #f46615;
          }
        }
      }
    }
  }

  .popup_share_box {
    // position: absolute;
    // top: 0;
    // left: 50%;
    // transform: translateX(-50%);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;

    .share_img_box {
      width: 300px;
      height: 555px;

      .share_img {
        width: 100%;
        height: 100%;
      }
    }

    .share_close_btn_box {
      position: absolute;
      top: -35px;
      right: 0;

      .share_close_btn {
        width: 30px;
        height: 30px;
      }
    }

    .popup_top_box {
      position: relative;
      display: flex;
      justify-content: center;
      padding: 23px 0;

      .top_img_box {
        // width: 272px;
        // height: 434px;
        width: 178px;
        height: 270px;

        .top_img {
          width: 100%;
          height: 100%;
        }
      }

      .popup_close_img {
        position: absolute;
        top: 8px;
        right: 80px;

        .close_img {
          width: 24px;
          height: 24px;
        }
      }
    }

    .popup_bottom_box {
      width: 375px;
      background: #fff;
      padding: 17px 13px 13px 13px;

      .copywriting_box {
        display: flex;
        align-items: center;
        padding-bottom: 14px;

        .copywriting_icon_box {
          width: 18px;
          height: 18px;

          .copywriting_icon {
            width: 100%;
            height: 100%;
          }
        }

        .copywriting_title {
          font-size: 15px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          padding-left: 11px;
        }
      }

      .copywriting_input_box {
        display: flex;
        align-items: center;

        .copywriting_input {
          display: flex;
          align-items: center;
          width: 311px;
          height: 34px;
          border: 1px solid #E6E6E6;
          border-radius: 5px;
          font-size: 13px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #808080;
          padding-left: 15px;
        }

        .refresh_icon_box {
          width: 18px;
          height: 18px;
          margin-left: 13px;

          .refresh_icon {
            width: 100%;
            height: 100%;
          }
        }
      }

      .components_box {
        display: flex;
        align-items: center;
        padding: 11px 0 13px;

        .components_icon_box {
          width: 18px;
          height: 18px;

          .components_icon {
            width: 100%;
            height: 100%;
          }
        }

        .components_title {
          font-size: 15px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #333333;
          padding-left: 11px;
        }
      }

      .components_img_box {
        display: flex;
        width: 100%;
        overflow-x: scroll;

        .components_img_all {
          position: relative;
          margin-right: 8px;

          .components_img {
            width: 87px;
            height: 139px;
          }

          .mask {
            width: 100%;
            /* 遮罩层宽度与容器等宽 */
            height: 100%;
            /* 遮罩层高度与容器等高 */
            background-color: rgba(0, 0, 0, 0.5);
            /* 设置背景色及透明度 */
            position: absolute;
            /* 将遮罩层放置于容器内部 */
            top: 0;
            left: 0;
          }

          .right_icon_box {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 20px;
            height: 20px;

            .right_icon {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .bottom_share_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 16px;

        .share_img_box {
          width: 41px;
          height: 41px;
          padding-bottom: 10px;

          .share_img {
            width: 100%;
            height: 100%;
          }
        }

        .share_title {
          font-size: 15px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
        }
      }
    }
  }

  .popup_attention_btn {
    position: fixed;
    bottom: 26%;
    right: 0;

    .attention_btn {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }

  .popup_attention_box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    width: 300px;
    background: #fff;
    border-radius: 12px;

    .popup_attention_all {

      .matter_title {
        color: #fff;
        background: #ff730b;
        font-size: 22px;
        text-align: center;
        padding: 8px 0;
        border-radius: 12px 12px 0 0;
      }

      .attention_con_box {
        padding: 20px 10px 20px 20px;

        .matter_con_title {
          color: #ff8801;
          font-size: 18px;
          padding-bottom: 8px;
        }

        .matter_con_detail {
          color: #666666;
          font-size: 15px;
        }
      }
    }

    .attention_close_box {
      position: absolute;
      top: -37px;
      right: -27px;

      .attention_close {
        width: 25px;
        height: 25px;
      }
    }
  }

  .mask {
    background-color: rgba(0, 0, 0, 0.7);
    /* 使用固定定位让元素撑满全屏 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .mask_agreement {
    background-color: rgba(0, 0, 0, 0.7);
    /* 使用固定定位让元素撑满全屏 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }
}
</style>
